DataTable ajax分页+删除

Posted 2020-08-25

这个框架前前后后跳进了很多次坑，也算是本人比较愚笨吧做了很长的时间而积累的经验。。。

 $(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(‘服务器无响应，请联系管理员!‘);
                    }
                })
            }
         });
       
  
});