前言

在項目實際開發我們會遇到表格列過多，表格內容過長的困擾，表格數據的展現很不理想，今天我為大家介紹如何結合Datatables 使用表格固定列；

效果展示

1、在屏幕足以展現內容的情況下

2、模擬屏幕過小 或表格列過多的情況

從效果圖可以看出，我將左側兩列和右側一列 作為固定列 ，中間內容可拖動顯示

開始使用

//引入juqery datables fixedColumns 根據各自的樣式需求 本人使用的是bootstrap 
<link href="您的資源目錄/dataTables.bootstrap.css" rel="stylesheet">
<link href="您的資源目錄/fixedColumns.bootstrap.css">
<script src='您的資源目錄/jquery.js'></script>
<script src='您的資源目錄/jquery.dataTables.min.js'></script>
<script src='您的資源目錄/dataTable.fixedColumns.js'></script> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

初始化datatables

//異步請求獲取表格渲染數據
var dataTable;
$(function () {
    dataTable = $('#表格ID')..DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {url:  "您的請求URL"},
            "scrollX": true,
            "autoWidth": true,
            "columns": [
            ...
            ]
    });
}) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

初始化fixedColumns

new $.fn.dataTable.FixedColumns(dataTable,{
    "iLeftColumns":2,  //開啟左側兩列固定
    "iRightColumns":1, //開啟右側1列固定
    "drawCallback": function(){
        //重繪的回調執行
    }
}); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

原理解析

在datableas 初始化后 根據設定的開啟固定列，獲取datables 對應表格數據 進行復制，然后采用position: absolute 在原表格 上加多一層固定列表格的展現，感興趣的朋友可以瀏覽器DEBUG查閱；

出現的問題

1、固定列出現滾動條

出現這個問題是 dataTable.fixedColumns.js 插件計算固定列寬的問題，可以在源碼進行修改；或者在fixedColumns.js 重繪成功后回調中執行

$(".DTFC_Cloned").css("width","auto"); 


    

        1
    

2、采用ICheck 插件無法點擊 和 勾選問題

原因：因為異步加載數據的問題 ，我們每次在datables重繪的回調函數中 進行ICheck 再次初始化；
而dataTable.fixedColumns.js 是 datables 初始化完成后才執行的 ，上文也提到固定列實現的原理，其復制了固定列數據 position: absolute，那么展現給我們看到的是已經初始化的ICheck ，真正可以勾選點擊的其實在下一層；

解決思路：在fixedColumns.js 重繪成功后回調中初始化ICheck； 再重新注冊全選 和反選事件；

//朋友們可以根據需求 自定定義自己的初始化和事件注冊
new $.fn.dataTable.FixedColumns(dataTable,{
    "iLeftColumns":2,
    "iRightColumns":1,
    "drawCallback": function(){
        //重繪Icheck 這里是我封裝的初始化方法
        iCheckInitFunction();
        //重新設置全選事件 這里是我全選/反選的注冊事件
        TableiCheck(".DTFC_Cloned thead tr th input.i-checks", ".DTFC_Cloned tbody tr td input.i-checks");
    }
}); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

修復版的 dataTable.fixedColumns.js 下載

大家可以選擇適合自己的樣式