【前端】jQuery DataTables 使用手冊（精簡版）

轉載請注明出處：http://www.cnblogs.com/shamoyuu/p/5182940.html

前排提醒，這個插件能不用就不用，那么多好的插件等着你，為什么要用它呢？就算用easyui的datagrid然后自己改樣式都比這強得多。

在引入easyui的css后，引入下面的css，就可以把easyui的datagrid變成bootstrap的風格了。

/*=================== easyui datagrid begin =======================*/
.datagrid-row:nth-child(odd){
    background: #F0F0F0;
}
.datagrid-header td, .datagrid-body td, .datagrid-footer td{
    border-style: solid;
}
.datagrid-row, .datagrid-header-row{
    height : 40px;
}
.datagrid-header, .datagrid-td-rownumber{
    background: #FFF;
}
.datagrid-row-over, .datagrid-header td.datagrid-header-over, .datagrid-row-over .rowbtn{
    background: #3598DC !important;
    color: #FFF;
}
.datagrid-view1 .datagrid-header-row td, .datagrid-view1 .datagrid-body{
    border-left: 1px solid #CCC;
}
.datagrid-header, .datagrid-toolbar, .datagrid-pager, .datagrid-footer-inner{
    border-color: #CCC;
}
.datagrid .datagrid-pager, .datagrid-header{
    border: none;
}
.pagination-info {
    margin: 0 10px 0 0;
}
.datagrid-header-row td{
    border-top: 1px solid #CCC;
}
.datagrid-pager{
    border: 1px solid #CCC !important;
    margin: 0 18px 0 0 !important;
}
.datagrid-view2 .datagrid-body{
    border-right: 1px solid #CCC;
}
.pagination{
    border-radius: 0;
}
.datagrid-view2 .datagrid-header-row td{
    cursor: pointer;
}
/*=================== easyui datagrid end =======================*/

 

//需要把這個回調函數放在datagrid的初始化方法里
onLoadSuccess : function(){
  //解決一個樣式bug
  $(".borderdiv").remove();
  var height = $(".datagrid-view2 .datagrid-body").outerHeight() - $(".datagrid-view2 .datagrid-btable").outerHeight();
  if(height > 0){
    $(".datagrid-view2 .datagrid-body").css("position", "relative").append("<div class='borderdiv'></div>");
    $(".borderdiv").css({
      height : height,
      borderLeft : "1px solid #ccc",
      position : "absolute",
      right : "18px"
    });
  }
}

這是效果，還是很好看的。

 

 

如果你執意要用，或者項目里已經用這個沒辦法變了，那就看看下面的內容吧。

 

一、常用屬性

//把公共的設置項都放在這里，就不需要每個頁面都設置一遍了，放在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);
    }
}