Datatables 定制化配置方法以及对常用操作的二次封装

Datatables功能强大，但是配置稍显复杂。先后在遇到两个使用Datatables作为表格数据展示与操作的项目，总结出一些经验和方法，分享给大家。

最常见的数据展示table

该table只负责数据的展示与删除等较简单的功能，不涉及数据的编辑，配置也比较简单。

HTML代码

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>来源</th>
            <th>操作用户</th>
            <th>级别</th>
            <th>发生时间</th>
            <th>操作</th>                     
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>来源</th>
            <th>操作用户</th>
            <th>级别</th>
            <th>发生时间</th>
            <th>操作</th>
            </tr>
        </tfoot>
    </table>

HTML页面只做最基础的定义操作，其他配置都在js中进行设置。

JS代码

var DatatableTest = {
    dt :null,
    runDataTables : function() {
   
        //DataTablePaging为自定义Datatable初始化方式类，getAjaxPagingOptions方法返回带Ajax和分页的初始化结果
        var options = DataTablePaging.getAjaxPagingOptions({
            ajaxUrl:'url',
            order : [5,'desc'],
            colums:[ 
                {data : "eventId",name:"event_id"}, //data对应Pojo类字段，name对应数据库字段
                {data : "source",name:"source"}, 
                {data : "account",name:"account"}, 
                {data : "level",name:"level"}, 
                {data : "createTime",name:"create_time"},
            ],
            //单独设置列内容，此处为删除操作
            columsdefs:[ {
                targets : [ 6 ], 
                data : "eventId", 
                render : function(value, type, data) {
    
                    return "<a href=\"javascript:DatatableTest.deleteEventDialog('"+ value +"')\"><span class=\"glyphicon glyphicon-remove\"></span></a>";
                }
            } ]
        });
        var dt = DatatableTest .dt = $('#example').DataTable(options); //此处完成Datatables初始化 
    },
}

DataTablePaging

ar DataTablePaging = {
    language : {
        zh_cn : {
            processing : "数据正在加载中...",
            search : "查询:",
            lengthMenu : "每页显示 _MENU_ 条记录",
            info : "从 _START_ 到 _END_ /共 _TOTAL_ 条记录",
            infoEmpty : "从 0 到  0  共 0  条记录",
            infoFiltered : "(从 _MAX_ 条数据中检索)",
            infoPostFix : "",
            thousands : ",",
            loadingRecords : "数据加载中...",
            zeroRecords : "没有检索到数据",
            emptyTable : "没有数据",
            paginate : {
                first : "首页",
                previous : "前一页",
                next : "后一页",
                last : "尾页"
            },
            aria : {
                sortAscending : ": 升序",
                sortDescending : ": 降序"
            }
        }
    },
    /**
     * 获取ajax分页options设置
     */
    getAjaxPagingOptions : function(settings) {
        var options = {
            ajax : {
                url : settings.ajaxUrl,
                type : "post"
            },
            serverSide : true,
            destroy : true,
            processing : true,
            ordering : true,
            searching : false,
            paging : true,
            pagingType : "full_numbers",
            lengthMenu : [ 10, 20, 50, 100 ],
            pageLength : 20,
            order : settings.order,// [index,'asc|desc']
            language : DataTablePaging.language.zh_cn,
            columns : settings.colums,
            columnDefs : settings.columsdefs,
        };
        return options;
    },
    /**
     * 获取ajax不分页options设置
     */
    getOptions : function(settings) {
        var options = {
            ajax : {
                url : settings.ajaxUrl,
                type : "post"
            },
            serverSide : false,
            destroy : true,
            processing : true,
            ordering : true,
            searching : false,
            pagingType : "full_numbers",
            lengthMenu : [ 10, 20, 50, 100 ],
            pageLength : 20,
            language : DataTablePaging.language.zh_cn,
            columns : settings.colums,
            columnDefs : settings.columsdefs,
        };
        return options;
    },
    /**
     * 获取非ajax分页options设置
     */
    getNotAjaxPagingOptions : function(settings) {
        var options = {
            serverSide : false,
            destroy :