jQuery DataTable 使用

### ‘发克‘

## 后台参数说明：

* @param {object} oSettings dataTables settings object
*  @param {object} json json data return from the server.
*  @param {string} json.sEcho Tracking flag for DataTables to match requests
*  @param {int} json.iTotalRecords Number of records in the data set, not accounting for filtering
*  @param {int} json.iTotalDisplayRecords Number of records in the data set, accounting for filtering
*  @param {array} json.aaData The data to display on this page
*  @param {string} [json.sColumns] Column ordering (sName, comma separated)

sEcho:                 # 从第几条数据开始 
iTotalDisplayRecords:  # 前台总共有多少条数据能展现 
iTotalRecords:         # 数据库中，在没有过滤的情况下有多少条数据
aaData:                # 名字可以修改，同时修改 sAjaxDataProp这个参数

 

 

initDataTable: function (_table, _options, _aoColumns) {
        if (!$().dataTable) {
            return;
        }
        var tableInitialized = false;
        var ajaxParams = [];
        var tableOptions = $.extend({
            oLanguage: {
                sLengthMenu: "每页显示 _MENU_ 条记录",
                sZeroRecords: "对不起，查询不到任何相关数据",
                sInfo: "显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                sInfoEmtpy: "找不到相关数据",
                sInfoFiltered: '', //"共有 _MAX_ 条记录"
                sProcessing: "正在加载中...",
                sSearch: "搜索",
                sInfoEmpty: "显示 0 到 0 条，共 0 条记录",
                oPaginate: {sPrevious: "上一页 ", sNext: "下一页"}
            },
            sDom: "<t<r><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
            sInfoEmpty: "没有找到数据～",
            sAjaxRequestGeneralError: "获取数据失败！",
            sEmptyTable: "没有数据",
            bAutoWidth: false,
            sScrollX: 'disabled',
            sScrollY: 'disabled',
            iDisplayLength: 25,
            bPaginate: true,
            bInfo: true,
            bFilter: false,
            bSort: false,
            bProcessing: true,
            sServerMethod: 'GET',
            bServerSide: true,
            sAjaxSource: '',
            aoColumns: _aoColumns || [],
            fnServerParams: function (aoData) {
                $.each(ajaxParams, function (i, param) {
                    aoData.push({name: param[0], value: param[1]});
                })
            },
            fnServerData: function (sUrl, aoData, fnCallback, oSettings) {
                oSettings.jqXHR = $.ajax({
                    url: sUrl,
                    data: aoData,
                    dataType: "json",
                    cache: false,
                    type: oSettings.sServerMethod,
                    success: function (json) {
                        if (json.sError) {
                            oSettings.oApi._fnLog(oSettings, 0, json.sError);
                        }
                        if (json.data) {
                            var data = json.data
                        } else {
                            var data = json
                        }
                        $(oSettings.oInstance).trigger('xhr', [oSettings, data]);
                        fnCallback(data);
                    },
                    error: function (xhr, error, thrown) {
                        if (error == "parsererror") {
                            oSettings.oApi._fnLog(oSettings, 0, "DataTables warning: JSON data from " +
                                "server could not be parsed. This is caused by a JSON formatting error.");
                        }
                    }
                });
            },
            updateTableParams: function (ajaxParams) {
                console.log('没有更新！');
            }
        }, _options || {});

        var dataTable = _table.dataTable(tableOptions);

        if (_table.data('update-btn')) {
            var $updateBtn = $(_table.data('update-btn'));
            $updateBtn.click(function () {
                console.log('更新');
                tableOptions.updateTableParams(ajaxParams);
                _table.fnDraw();
            });
        }

        return dataTable;
    }

 

function getBaseParams() {
                // 这里获取要传的参数
                return  {<name>: <alue>, ...}
            }

            var aoColumns = [
                {   mData: key, // 字段key
                    fnRender: function (oObj) {
                        return '<div><span>' +
                                '<input type="checkbox" class="checkbox-item" value="' + oObj['aData'][字段key] + '"></span></div>'
                    }
                },
                {mData: 字段key, sWidth: '20%'},
                {mData: 字段key}
                .......
            ];

            var $table = $('#TableListId');
            var baseUrl = $table.data('base-url');

            var updateTableParams = function (ajaxParams) {
                var params = getBaseParams()// 自定义获取想要传的参数方法;
                for (var name in params) {
                    ajaxParams.push([name, params[name]])
                }
            };

            initDataTable($table, {sAjaxSource: baseUrl, updateTableParams: updateTableParams}, aoColumns);