前言

在項(xiàng)目實(shí)際開發(fā)我們會(huì)遇到表格列過多，表格內(nèi)容過長的困擾，表格數(shù)據(jù)的展現(xiàn)很不理想，今天我為大家介紹如何結(jié)合Datatables 使用表格固定列；

效果展示

1、在屏幕足以展現(xiàn)內(nèi)容的情況下

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

從效果圖可以看出，我將左側(cè)兩列和右側(cè)一列 作為固定列 ，中間內(nèi)容可拖動(dòng)顯示

開始使用

//引入juqery datables fixedColumns 根據(jù)各自的樣式需求 本人使用的是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

//異步請(qǐng)求獲取表格渲染數(shù)據(jù)
var dataTable;
$(function () {
    dataTable = $('#表格ID')..DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {url:  "您的請(qǐng)求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,  //開啟左側(cè)兩列固定
    "iRightColumns":1, //開啟右側(cè)1列固定
    "drawCallback": function(){
        //重繪的回調(diào)執(zhí)行
    }
}); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

原理解析

在datableas 初始化后 根據(jù)設(shè)定的開啟固定列，獲取datables 對(duì)應(yīng)表格數(shù)據(jù) 進(jìn)行復(fù)制，然后采用position: absolute 在原表格 上加多一層固定列表格的展現(xiàn)，感興趣的朋友可以瀏覽器DEBUG查閱；

出現(xiàn)的問題

1、固定列出現(xiàn)滾動(dòng)條

出現(xiàn)這個(gè)問題是 dataTable.fixedColumns.js 插件計(jì)算固定列寬的問題，可以在源碼進(jìn)行修改；或者在fixedColumns.js 重繪成功后回調(diào)中執(zhí)行

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


    

        1
    

2、采用ICheck 插件無法點(diǎn)擊 和 勾選問題

原因：因?yàn)楫惒郊虞d數(shù)據(jù)的問題 ，我們每次在datables重繪的回調(diào)函數(shù)中 進(jìn)行ICheck 再次初始化；
而dataTable.fixedColumns.js 是 datables 初始化完成后才執(zhí)行的 ，上文也提到固定列實(shí)現(xiàn)的原理，其復(fù)制了固定列數(shù)據(jù) position: absolute，那么展現(xiàn)給我們看到的是已經(jīng)初始化的ICheck ，真正可以勾選點(diǎn)擊的其實(shí)在下一層；

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

//朋友們可以根據(jù)需求 自定定義自己的初始化和事件注冊(cè)
new $.fn.dataTable.FixedColumns(dataTable,{
    "iLeftColumns":2,
    "iRightColumns":1,
    "drawCallback": function(){
        //重繪Icheck 這里是我封裝的初始化方法
        iCheckInitFunction();
        //重新設(shè)置全選事件 這里是我全選/反選的注冊(cè)事件
        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
    

修復(fù)版的 dataTable.fixedColumns.js 下載

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