DataTables 表格固定欄使用方法

有時候數據過多，爲了用戶體驗，須要將重要的欄目固定不動，以下圖所示：

從上圖咱們能夠看出，表格滾動的時候，左邊5欄是不動的。如今說一下實現方法：

插件地址：

https://datatables.net/

 

使用方法：

wageTable爲表格的ID。

var table = $('#wageTable').DataTable( {
    scrollX: true,
    scrollCollapse: true,
    paging: false, //不用分頁
    info: false, //隱藏表格底部信息
    ordering: false, //隱藏排序
    searching: false, //隱藏搜索欄
    fixedColumns:   {
        leftColumns: 5 //左側要固定的欄目數，若是右側須要固定能夠用 rightColunms
    },
    language: {
        sEmptyTable: "暫無數據", //沒數據時的提示文字定義爲中文，默認是」No data available in table「
    }
});

 

更多左右2邊固定例子可訪問：https://datatables.net/extensions/fixedcolumns/examples/

參數具體的用法及含義可訪問：https://datatables.net/reference/option/

更多dataTable英文信息替換成中文:

$('#wageTable').DataTable({
    language: {
        "sProcessing": "處理中...",
        "sLengthMenu": "顯示 _MENU_ 項結果",
        "sZeroRecords": "沒有匹配結果",
        "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
        "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
        "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中數據爲空",
        "sLoadingRecords": "載入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首頁",
            "sPrevious": "上頁",
            "sNext": "下頁",
            "sLast": "末頁"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
});