jquery.datatable.js 表格插件實際運用

$.dataTablesSettings = {
    deferRender: true,// 當處理大數據時，延遲渲染數據，有效提高Datatables處理能力
    bStateSave: true,//表格狀態保持
    searching: false,//搜索框
    bPaginate: true, // 翻頁功能
    bLengthChange: true, // 改變每頁顯示數據數量
    bFilter: true, // 過濾功能
    bInfo: true,// 頁腳信息
    bAutoWidth: false,// 是否自動計算表格各列寬度
    iDisplayLength: 10,
    bProcessing: false,//加載動畫
    serverSide: true, // 啟用服務器端分頁
    ajax: function (data, callback, settings) {
        showLoading();
        // 封裝請求參數
        var param = {};
        param.limit = data.length;// 頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
        param.start = data.start;// 開始的記錄序號
        param.page = (data.start / data.length) + 1;// 當前頁碼
        param.keywords = $("#keywords").val();
        param.park_id = $('#parks_value').val();
        param.status = $('#status').val();
        param.is_old = $('#is_old').val();
        param.type_industry = $('#type_industry').val();
        param.contract_type = $('#contract_type').val();

        var len = data.order.length;
        if (len > 1) {
            // 第一次以id排序
            param.order = "id desc";
        } else {
            // 單排序條件
            if (data.order) {
                if (data.order[0].dir) {
                    var index = data.order[0].column;
                    var name = data.columns[index].name;
                    param.order = name + " " + data.order[0].dir;
                }
            }
        }

        $.ajax({
            type: 'post',
            url: xxx,
            data: param,
            dataType: 'json',
            success: function (res) {
                var returnData = {};
                returnData.draw = parseInt(data.draw);// 這里直接自行返回了draw計數器,應該由后台返回
                returnData.recordsTotal = res.total;
                returnData.recordsFiltered = res.total;// 后台不實現過濾功能，每次查詢均視作全部結果
                returnData.data = res.data;
                callback(returnData);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("獲取失敗");
            }
        });
    },
    columns: [{
        data: function (mdata) {
            var html = '';
            html += '<div class="checkbox"><input name="checks[]" value="' + mdata.id + '" class="select_checkbox" id="checkbox_' + mdata.id + '" type="checkbox"><label for="checkbox_' + mdata.id + '"></label></div>';
            return html;
        },
        orderable: false
    }, {
        data: "pName",
        orderable: false
    }, {
        data: "name",
        name: "name"
    }, {
        data: "cName",
        orderable: false
    }, {
        data: "room",
        orderable: false
    }, {
        data: "legalperson",
        orderable: false
    }, {
        data: "contact_phone",
        orderable: false
    }, {
        data: function (mdata) {
            if (mdata.status == 0) {
                return "<span style='color: #f8ac59'>未執行</span>";
            } else if (mdata.status == 1) {
                return "<span  style='color: #1c84c6'>已執行</span>";
            } else {
                return "<span  style='color: #ed5565'>已終止</span>";
            }
        },
        name: "status"
    }, {
        data: "start_date",
        name: "start_date"
    }, {
        data: "end_date",
        name: "end_date"
    }, {
        data: function (mdata) {
            if (mdata.is_c == 1) {
                return "<span  style='color: #1c84c6'>已續簽</span>";
            } else {
                return "<span  style='color: #a8a8a8'>未續簽</span>";
            }
        },
        name: "is_c"
    }, {
        data: "area",
        orderable: false
    }, {
        data: function (mdata) {
            return "<span style='color:red;font-weight:bold;'>" + mdata.all_money + "</span>";
        },
        orderable: false
    }, {
        data: "uName",
        orderable: false
    }, {
        data: function (mdata) {
            var html = '';
            var mark = mdata.mark.replace(/\ +/g, "");
            if (mark) {
                var temp = mark.replace(/\n/g, "**");
                html = '<a href="javascript:;" onclick="flag(' + mdata.id + ', \'' + temp + '\')">' + mark + '</a>';
            } else {
                html = '<a href="javascript:;" onclick="flag(' + mdata.id + ',\'' + mark + '\')"><i class="fa fa-flag"></i></a>';
            }
            return html;
        },
        orderable: false
    }, {
        data: function (mdata) {
            var html = '';
            if (is_look == true) {
                html += ' <button type="button" class="btn btn-info btn-xs" onclick="look(' + mdata.id + ')">查看</button>';
            }
            if (is_edit == true && mdata.status == 0) {
                html += ' <button type="button" class="btn btn-primary btn-xs" onclick="edit(' + mdata.id + ')">編輯</button>';
            }
            if (is_change == true && mdata.status == 1) {
                html += ' <button type="button" class="btn btn-success btn-xs" onclick="continues(' + mdata.id + ', ' + mdata.status + ', \'' + mdata.end_date + '\')">續租</button>';
            }
            if (is_end == true && mdata.status != 2) {
                html += ' <button type="button" class="btn btn-danger btn-xs" onclick="endBargain(' + mdata.id + ')">終止</button>';
            }
            html += ' <button type="button" class="btn btn-default btn-xs" onclick="printBargain(' + mdata.id + ')">打印</button>';
            return html;
        },
        orderable: false
    }],
    fnInitComplete: function (oSettings, json) {
        hideLoading();
        //表格渲染完成執行
    },
    drawCallback: function () {
        //表格每畫一次執行
    },
    columnDefs: [{
        "orderable": false,
        "targets": 0
    }],
    aaSorting: [[2, 'desc'], [7, 'desc'], [8, 'desc'],[9, 'desc'], [10,'desc']]
};
initTable = $(".dataTables-example").dataTable($.dataTablesSettings);