DataTable ajax分页+删除

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DataTable ajax分页+删除相关的知识,希望对你有一定的参考价值。

这个框架前前后后跳进了很多次坑,也算是本人比较愚笨吧做了很长的时间而积累的经验。。。
 $(document).ready(function() {
        $("#sample").DataTable({
            // Internationalisation. For more info refer to http://datatables.net/manual/i18n
            language: {
                "aria": {
                    "sortAscending": ": 以升序排列此列",
                    "sortDescending": ": 以降序排列此列"
                },
                "emptyTable": "表中数据为空",
                "info": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",
                "infoEmpty": "没有发现记录",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "infoPostFix": "",
                "infoThousands": ",",
                "lengthMenu": "每页 _MENU_ 项",
                "loadingRecords": "载入中...",
                "processing": "处理中...",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页",
                },
                //"search": "搜索:",
                //"url": "",
                "zeroRecords": "没有匹配结果"
            },
            order: [],//取消默认排序查询,否则复选框一列会出现小箭头
            bLengthChange:false,//禁止使用搜索框
            autoWidth:false,//禁用自动调整列宽
            stripeClasses:["odd", "even"],//为奇偶行加上样式,兼容不支持CSS伪类的场合
            searching:false,//禁用原生搜索
            orderMulti:false,//启用多列排序
            renderer:"bootstrap",//渲染样式:Bootstrap和jquery-ui
            pagingType:"simple_numbers", //分页样式:simple,simple_numbers,full,full_numbers
            ajax: function (data, callback) {
                var param = {};
                param.limit = data.length;//每页显示多少
                param.start = data.start;//开始的记录序号
                //console.log(param.limit);
                //param.draw = 1;
                 $.ajax({
                    type: "POST",
                    url: "/ajax/lock/list",
                    //cache: false,  //禁用缓存
                    data: JSON.stringify(param),  //传入组装的参数
                    queryParams:function(params){
                        var xsrf = $("input[name = ‘_xsrf‘]")
                        if(xsrf != undefined){
                            params._xsrf = product_ver[0].value;
                        }
                        var limit = $("select[name=‘table-record_length‘]");
                        if(limit != undefined){
                            limit = (limit[0] && limit[0].value) || 20;
                            params.length = limit;
                        }
                        return params
                    },
                   dataSrc: function(response){
                       return response.data;
                    },
                    dataType: "json",
                    success: function (result) {
                       
                        //setTimeout仅为测试延迟效果
                        setTimeout(function () {
                            //封装返回数据
                        var returnData = {};
                        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
                        returnData.recordsFiltered = result.recordsTotal;//后台不实现过滤功能,每次查询均视作全部结果
                        returnData.data = result.data;//返回的数据列表
                       
                        //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                        }, 200);
                    }
                })
            },
            processing:true,//隐藏加载提示,自行处理
            serverSide:true,//启用服务器端分页
            columns:[
               { "data": "lock_id","searchable":false,"orderable":true},
               { "data": "name","searchable":false,"orderable":false},
               { "data": "cat_eye", "render":function(data){
                   switch(data){
                        case true:
                            return ‘有‘;
                        case false:
                            return ‘没有‘;
                   }
               }},
               { "data": "type", "render":function(data){
                   switch(data){
                        case 0:
                            return ‘F-A‘;
                        case 1:
                            return ‘F-B‘;
                        default:
                            return ‘F-C‘
                   }
               }},
               { "data": "mac","searchable":false,"orderable":false},
               { "data": "province","searchable":false,"orderable":false},
               { "data": "alarm", "render":function(data){
                   switch(data){
                        case 0:
                            return ‘正常‘;
                        case 1:
                            return ‘不正常‘;
                   }
               }},
               { "data": "online", "render":function(data){
                   switch(data){
                        case true:
                            return ‘在线‘;
                        case false:
                            return ‘不在线‘;
                   }
               }},
               { "data": "corp_id", "render":function(data){
                   switch(data){
                        case 0:
                            return ‘安居心‘;
                        case 1:
                            return ‘国海‘;
                   }
               }},
               { "data": "product_ver","searchable":false,"orderable":false},
               { "data": "firmware_ver","searchable":false,"orderable":false},
               { "data": "master_id"},
               { "data": "has_ap", "render":function(data){
                   switch(data){
                        case 0:
                            return ‘有‘;
                        case 1:
                            return ‘没有‘;
                   }
               }},
               { "data": "descr","searchable":false,"orderable":false},
               {
                    "data": null,
                    "className": "center",
                    "defaultContent": ‘<button type="button" id="editrow" data-toggle="modal" class="btn btn-outline btn-circle btn-sm purple"><i class="fa fa-edit"></i></button>  <button id="delrow" class="btn btn-outline btn-circle dark btn-sm black"><i class="fa fa-trash-o"></i></button>‘
                }
            ],
        });
         //表数据删除
        $(‘#sample‘).on( ‘click‘, ‘button#delrow‘, function (even) {
             even.preventDefault;//方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
             if(confirm("确定删除该信息?") == false){
                return;
             }else{
         //得到当前对象的值 var data = $("#sample").DataTable().row( $(this).parents(‘tr‘) ).data(); $.ajax({ url: ‘/ajax/lock/delete‘, type: ‘POST‘, dataType: ‘json‘, data: JSON.stringify({ lock_id: data["lock_id"] }),
            //success是指后台数据库的表么?如果是,先将success表中相关的数据封装在list里面,然后将list转为json数据格式的字符串返回到前台。如果你用的是jQuery的ajax方法,那么记得在前台接受的时候一定要指定数据接受格式为json,否则你得到是一个json的字符串,不是一个json的对象    success:function(data){ if (data.success == null){ alert(‘删除成功!‘); start = $("#sample").dataTable().fnSettings()._iDisplayStart;//从第几行开始显示数据 total = $("#sample").dataTable().fnSettings().fnRecordsDisplay();// window.location.reload(); if((total-start) == 1){ if (start > 0) { $("#sample").dataTable().fnPageChange( ‘previous‘, true);//已回到上一页中
                      //.注意$("#sorting-advanced").dataTable().fnPageChange( ‘previous‘); 是不行的,必需进行刷新,否则页面中显示的iDisplayStart会从cookie中取得,还是删除前的iDisplayStart } } } }, error:function(){ console.log(data); alert(‘服务器无响应,请联系管理员!‘); } }) } }); });

  




以上是关于DataTable ajax分页+删除的主要内容,如果未能解决你的问题,请参考以下文章

围绕DataTable';允许在Rails应用程序中与服务器端分页同步的ajax方法

Jquery DataTable 删除分页

DataTable分页页面选择颜色

使用 ajax 的 Datatable 删除电子邮件操作未捕获数据

PrimeFaces Datatable单击分页链接取消选中所有复选框

jQuery 数据表:使用 Ajax 分页进行搜索和过滤