DataTable ajax分页+删除+查询+修改

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

dataTable用了很久，今天在此总结一下使用方法以及常用属性的解释。

Html代码 ：

<div class="row">
    <div class="col-md-12">
       <!--  BEGIN Portlet PORTLET-->
        <div class="portlet box blue">
            <!--框架头 -->
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-gift"></i>锁列表
                </div>
            </div>
            <!--END 框架头 -->
            <div class="portlet-body">
                <!--   搜索-->
                <!--<div class="form-horizontal">-->
                <form class="form-horizontal" action="/ajax/lock/list" method="POST" id="form">
                    <div class="form-wizard">
                        <div class="form-body">
                            <div class="tab-content">
                                <div class="tab-pane active" id="tab1">
                                    <div class="form-group">
                                        <label class="control-label col-md-1"> 产品型号</label>
                                        <div class="col-md-2">
                                            <input type="text" class="form-control" name="product_ver" value="" id="product_ver"/>
                                        </div>
                                        <label class="control-label col-md-1"> mac</label>
                                        <div class="col-md-2">
                                            <input type="text" class="form-control" name="mac" value="" id="mac"/>
                                        </div>
                                        <label class="control-label col-md-1"> 锁编号</label>
                                        <div class="col-md-2">
                                            <input type="text" class="form-control" name="lock_id" value="" id="lock_id"/>
                                        </div>
                                        <label class="control-label col-md-1">固件版本</label>
                                        <div class="col-md-2">
                                            <select name="firmware_ver" class="form-control" value="" id="firmware_ver">
                                                <option value="0"></option>
                                                <option value="1">正常</option>
                                                <option value="2">锁住</option>
                                                <option value="3">开放</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-1">合作企业</label>
                                        <div class="col-md-2">
                                            <select name="corp_id" class="form-control" value="" id="corp_id">
                                                <option value="0"></option>
                                                <option value="1">安居心</option>
                                                <option value="2">国海</option>
                                            </select>
                                        </div>
                                        <label class="control-label col-md-1">是否有猫眼</label>
                                        <div class="col-md-2">
                                            <select name="cat_eya" class="form-control" value="" id="cat_eya">
                                                <option value="0"></option>
                                                <option value="true">有</option>
                                                <option value="false">没有</option>

                                            </select>
                                        </div>
                                        <label class="control-label col-md-1"> 用户</label>
                                        <div class="col-md-2">
                                            <input type="text" class="form-control" name="master_id" value="" id="master_id"/>
                                        </div>
                                        <label class="control-label col-md-1">是否有路由器</label>
                                        <div class="col-md-2">
                                            <select name="has_ap" class="form-control" value="" id="has_ap">
                                                <option value="0"></option>
                                                <option value="1">正常</option>
                                                <option value="2">锁住</option>
                                                <option value="3">开放</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="info-btn"><button id="submit">查询</button></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!--</div>-->
                </form>
                 <!--END 搜索-->
                <div class="row">
                    <div class="col-md-12">
                        <!-- 开始PORTLET示例表-->
                        <div class="portlet light bordered">
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover dt-responsive" width="100%" id="sample">
                                    <thead>
                                        <tr>
                                            <th>锁编号</th>
                                            <th>锁名称</th>
                                            <th>猫眼</th>
                                            <th>锁类型</th>
                                            <th>MAC</th>
                                            <th>锁地址</th>
                                            <th>报警状态</th>
                                            <th>是否在线</th>
                                            <th>合作企业</th>
                                            <th>产品型号</th>
                                            <th>固件版本</th>
                                            <th>用户</th>
                                            <th>是否有路由器</th>
                                            <th>备注</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                           </div>
                        </div>
                        <!-- END PORTLET示例表-->
                    </div>
                </div>
            </div>
        </div>
       <!--  END Portlet PORTLET-->
    </div>
</div>
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">修改</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label"> 锁编号</label>
                        <input type="text" class="form-control" id="id" disabled>
                    </div>
                    <div class="form-group">
                        <label class="control-label"> 锁名称</label>
                        <input type="text" class="form-control" id="name" >
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>

js  下面是dataTable配置方式以及参数详解：

$(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) {
                    //console.log(result);
                    //setTimeout仅为测试延迟效果
                    setTimeout(function () {
                        //封装返回数据
                        var returnData = {};
                        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
                        returnData.recordsFiltered = result.recordsTotal;//后台不实现过滤功能，每次查询均视作全部结果
                        returnData.data = result.data;//返回的数据列表
                        //console.log(returnData);
                        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    }, 200);
                }
            })
        },
        processing:true,//隐藏加载提示,自行处理
        serverSide:true,//启用服务器端分页
        bStateSave: 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","searchable":false,"orderable":false},
           { "data": "has_ap", "render":function(data){
               switch(data){
                    case true:
                        return '有';
                    case false:
                        return '没有';
               }
           }},
           { "data": "descr","searchable":false,"orderable":false},
           {
                "data": null,
                "className": "center",
                "defaultContent": '<button type="button" id="editor_edit" data-toggle="modal" class="btn btn-outline btn-circle btn-sm purple">编辑</button> / <button id="editor_remove" class="btn btn-outline btn-circle dark btn-sm black">删除</button>'
            }
        ],
    });
         //表数据删除
    $('#sample').on( 'click', 'button#editor_remove', function (even) {
         even.preventDefault;//方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
         if(confirm("确定删除该信息？") == false){
            return;
         }else{
            var data = $("#sample").DataTable().row( $(this).parents('tr') ).data();
            $.ajax({
                url: '/ajax/lock/delete',//URL由scheme(协议)、netloc(主机)、path(路径)、params(最后路径的参数)、query(查询字段)、fragment(瞄)组成
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify({
                    lock_id: data["lock_id"]
                }),
                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('服务器无响应，请联系管理员!');
                }
            })
        }
     });
    // 数据编辑
    $('#sample i').css({"fontStyle":"normal"});
    $('#sample').on( 'click', 'button#editor_edit', function (even) {
        even.preventDefault;//方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
        var data = $("#sample").DataTable().row( $(this).parents('tr') ).data();
        //清空内容
        //$('.col-md-6 input').val('');
       // console.log(data);
        //弹出层展示
        $('#myModal').modal('show')
        //$("#myModal").draggable({handle: ".modal-header"});
        //填充内容
        $('#id').val(data.lock_id);
        $('#name').val(data.name);
    });
    $('#save').on('click',function(){
        var lock_id = parseInt($('#id').val());
        var name = $('#name').val();
        $.ajax({
            url:'/ajax/lock/update',
            type:'POST',
            contentType: "application/json",
            timeout : "3000",
            cache:false,
            data: JSON.stringify({
                "lock_id" : lock_id,
                "name" : name,
            }),
            dataType: "json",
            success:function(data){
                console.log(data);
                //弹窗关闭
                $('#save').hide();
                window.location.reload();
            },
            error:function(err){
                alert("数据刷新失败,请重新刷新");
            }
        });
    });

   /* //数据查询
    $('.form-horizontal').on("submit", function ( event){
        event.preventDefault();
        var jsonData = $("form").serializeJSON();
        console.log(jsonData);

        $.post('/ajax/lock/list', params, function(result){

        }).success(function(response){
            console.log(response);
            //do something with the response
        })
    })*/
});

//数据查询
    function onLockSearchSubmit() {
    //获取表单数据
    var productVerObj = $("[name='product_ver']");
    var macObj = $("[name='mac']");
    var lockIdObj = $("[name='lock_id']");
    var firmwareVerObj = $("[name='firmware_ver']");
    var corpIdObj = $("[name='corp_id']");
    var catEyeObj = $("[name='cat_eye']");
    var masterIdObj = $("[name='master_id']");
    var hasApObj = $("[name='has_ap']");

    var form = $("form");
    form.submit(function () {
        return false;
    });

    var url = "/ajax/lock/list";
    var params = {};
    if (productVerObj.val() != "") {
        params["product_ver"] = productVerObj.val();
    }
    if(macObj.val() != "") {
        params["mac"] = macObj.val();
    }
    if(lockIdObj.val() > 0) {
        params["lock_id"] = lockIdObj.val();
    }
    if(firmwareVerObj.val() != 0) {
        params["firmware_ver"] = firmwareVerObj.val();
    }
    if(corpIdObj.val() != 0) {
        params["corp_id"] = corpIdObj.val();
    }
    if(catEyeObj.val() != 0) {
        params["cat_eye"] = catEyeObj.val();
    }
    if(masterIdObj.val() != 0) {
        params["master_id"] = masterIdObj.val();
    }
    if(hasApObj.val() != false) {
        params["has_ap"] = hasApObj.val();
    }

    params = JSON.stringify(params);

    $.post(url, params, function(result){
        var table_data = JSON.parse(result)["data"];
        var table = $("#sample").DataTable();
        table.destroy();
        $("#sample").empty();
        $("#sample").DataTable({
            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": "没有匹配结果"
        },
            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
            order: [],//取消默认排序查询,否则复选框一列会出现小箭头
            data: table_data,
　　　　　　　//表头，有很多种写法可以把这些属性放在一个花括号里面，targets是下标从0开始的
            columnDefs: [
                { "title": "锁编号", "targets": 0 },
                { "title": "锁名称", "targets": 1 },
                { "title": "猫眼", "targets": 2 },
                { "title": "锁类型", "targets": 3 },
                { "title": "MAC", "targets": 4 },
                { "title": "锁地址", "targets": 5 },
                { "title": "报警状态", "targets": 6 },
                { "title": "是否在线", "targets": 7 },
                { "title": "合作企业", "targets": 8 },
                { "title": "产品型号", "targets": 9 },
                { "title": "固件版本", "targets": 10 },
                { "title": "用户", "targets": 11 },
                { "title": "是否有路由器", "targets": 12 },
                { "title": "备注", "targets": 13 },
                { "title": "操作", "targets": 14 },
             ],
            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 true:
                        return '有';
                    case false:
                        return '没有';
               }
              }},
               { "data": "descr","searchable":false,"orderable":false},
               {
                    "data": null,
                    "className": "center",
                    "defaultContent": '<button type="button" id="editor_edit" data-toggle="modal" class="btn btn-outline btn-circle btn-sm purple">编辑</button> / <button id="editor_remove" class="btn btn-outline btn-circle dark btn-sm black">删除</button>'
                }
            ],

        })
    })
}

　　不懂的可以加WX详细聊 TangYR168