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