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);