【前端】jQuery DataTables 使用手册（精简版）

【前端】jQuery DataTables 使用手册（精简版）

一、常用属性

//把公共的设置项都放在这里，就不需要每个页面都设置一遍了，放在jQuery对象上是为了避免污染全局变量
window.dataTablesSettings = {
    processing : false,//是否显示加载中提示
    bAutoWidth : false,//是否自动计算表格各列宽度
    bPaginate : true,//是否显示使用分页
    bInfo : false,//是否显示页数信息
    sPaginationType : "full_numbers",//分页样式
    iDisplayLength : 10,//默认每页显示多少条记录
    searching : false,//是否显示搜索框
    bSort : false,//是否允许排序
    serverSide : true,//是否从服务器获取数据
    bStateSave : true,//页面重载后保持当前页
    bLengthChange : false,//是否显示每页大小的下拉框
    sServerMethod : "POST",
    language: {
        lengthMenu : "每页显示 _MENU_记录", 
        zeroRecords : "没有匹配的数据", 
        info : "第_PAGE_页/共 _PAGES_页", 
        infoEmpty : "没有符合条件的记录", 
        search : "查找", 
        infoFiltered : "(从 _MAX_条记录中过滤)", 
        paginate : { "first" : "首页 ", "last" : "末页", "next" : "下一页", "previous" : "上一页"}
    },
    //这里是为ajax添加自定义参数，给它添加的属性，它会传给后台
    fnServerParams : function (aoData) {
        aoData._rand = Math.random();
    }
};

//引用了上面的js文件后，在这里设置其他的参数
//ajax的url
window.dataTablesSettings.ajax = "/backend/content/load";
//如果表格的高度大于这个值，tbody就会出现滚动条，而表头固定
window.dataTablesSettings.sScrollY = $(window).height() - 300;//是否开启垂直滚动(否=disabled)
//设置具体的列名
window.dataTablesSettings.columns = [
    {data : "id"},
    {data : "title"}, 
    {data : "sort"}, 
    {data : "diffcity"}, 
    {data : "citys"},
    {data : "edittime"},
    {data : "editer"}
];
//对列进行操作，这里只是替换掉第一列
window.dataTablesSettings.columnDefs = [{
    targets : [0],
    data : "id",
    render : function(data, type, row) {
        return "<a title='编辑' class='glyphicon glyphicon-edit nounderline' href='javascript:editTabRow(" + data + ");'></a>&nbsp;"  + 
               "<a title='复制' class='glyphicon glyphicon-duplicate nounderline' href='javascript:copyTabRow(" + data + ");'></a>&nbsp;" +
               "<a title='删除' class='glyphicon glyphicon-trash nounderline' href='javascript:deleteTabRow(" + data + ");'></a>";
    }
}];

二、事件

window.dataTablesSettings.fnDrawCallback = function(data){
    //每一次表格绘制完成时调用
};
window.dataTablesSettings.fnInitComplete = function(){
    //表格初始化时调用一次
};
//还有其他不常用的，就不列举了

三、方法

//重绘方法。true会回到表格的初始状态，例如回到第一页，false只是重新加载当前页
dataTable.fnDraw(false);
//销毁方法。true会删除表格元素，而false不会，它只是销毁dataTable对象
dataTable.fnDestroy(false);
//换页方法，可以跳转到指定页。可选参数有"first", "previous", "next" , "last"，或者是一个整数，0是第一页
dataTable.fnPageChange(0);

四、搜索案例

//这里是搜索的案例，不过自定义分页也可以这么做
$("#searchBtn").on("click", function(){
    //这里是为了解决搜索条件变化后，没有点搜索按钮，而是点换页后搜索条件也变化的bug
    var stitle = $("#stitle").val();
    var sdiffcity = $("#sdiffcity").val();
    var scity = $("#scity").val();
    
    //这里重新设置参数
    window.dataTablesSettings.fnServerParams = function (aoData) {
        aoData.stitle = stitle;
        aoData.sdiffcity = sdiffcity;
        aoData.scity = scity;
        aoData._rand = Math.random();
    }
    //搜索就是设置参数，然后销毁datatable重新再建一个
    dataTable.fnDestroy(false);
    dataTable = $("#datatable").dataTable(window.dataTablesSettings);
    //搜索后跳转到第一页
    dataTable.fnPageChange(0);
});

五、注意事项

//当window尺寸改变时触发，以解决dataTable表头不自动适应的问题
//resize和scroll事件一定要优化
window.resizeWaiter = false;
$(window).resize(function() {
    if(!window.resizeWaiter){
        window.resizeWaiter = true;
        setTimeout(function(){
            window.dataTable && window.dataTable.fnDraw(false);
            window.resizeWaiter = false;
        }, 500);
    }
});

//在删除的ajax的success方法里需要这么写，如果当前页只有一条数据，删除后跳转到前一页
start = $("#datatable").dataTable().fnSettings()._iDisplayStart;
total = $("#datatable").dataTable().fnSettings().fnRecordsDisplay();
dataTable.fnDraw(false);
if ((total - start) == 1) {
    if (start > 0) {
        $("#datatable").dataTable().fnPageChange("previous", true);
    }
}