DataTable 1.12 - 基本使用 - hoyo 學習紀錄

參考資源

安裝

https://datatables.net/download/

如果有使用 Bootstrap，framework 務必要選擇

中文化

使用 url 方式

language: {
    url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/zh-HANT.json'
},

language: {

url: '//cdn.datatables.net/plug-ins/1.12.1/i18n/zh-HANT.json'

JavaScript

$dataTable_zh = {"processing":"處理中...","loadingRecords":"載入中...","lengthMenu":"顯示_MENU_項結果","info":"顯示第_START_至_END_項結果，共_TOTAL_項","infoEmpty":"顯示第0至0項結果，共0項","infoFiltered":"(從_MAX_項結果中過濾)","search":"搜尋:","paginate":{"first":"第一頁","previous":"上一頁","next":"下一頁","last":"最後一頁"},"aria":{"sortAscending":":升冪排列","sortDescending":":降冪排列"},"emptyTable":"目前沒有資料","datetime":{"previous":"上一頁","next":"下一頁","hours":"時","minutes":"分","seconds":"秒","amPm":["上午","下午"],"unknown":"未知","weekdays":["週日","週一","週二","週三","週四","週五","週六"],"months":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},"searchBuilder":{"add":"新增條件","condition":"條件","deleteTitle":"刪除過濾條件","button":{"_":"複合查詢(%d)","0":"複合查詢"},"clearAll":"清空","conditions":{"array":{"contains":"含有","equals":"等於","empty":"空值","not":"不等於","notEmpty":"非空值","without":"不含"},"date":{"after":"大於","before":"小於","between":"在其中","empty":"為空","equals":"等於","not":"不為","notBetween":"不在其中","notEmpty":"不為空"},"number":{"between":"在其中","empty":"為空","equals":"等於","gt":"大於","gte":"大於等於","lt":"小於","lte":"小於等於","not":"不為","notBetween":"不在其中","notEmpty":"不為空"},"string":{"contains":"含有","empty":"為空","endsWith":"字尾為","equals":"等於","not":"不為","notEmpty":"不為空","startsWith":"字首為","notContains":"不含","notStarts":"開頭不是","notEnds":"結尾不是"}},"data":"欄位","leftTitle":"群組條件","logicAnd":"且","logicOr":"或","rightTitle":"取消群組","title":{"_":"複合查詢(%d)","0":"複合查詢"},"value":"內容"},"editor":{"close":"關閉","create":{"button":"新增","title":"新增資料","submit":"送出新增"},"remove":{"button":"刪除","title":"刪除資料","submit":"送出刪除","confirm":{"_":"您確定要刪除您所選取的%d筆資料嗎？","1":"您確定要刪除您所選取的1筆資料嗎？"}},"error":{"system":"系統發生錯誤(更多資訊)"},"edit":{"button":"修改","title":"修改資料","submit":"送出修改"},"multi":{"title":"多重值","info":"您所選擇的多筆資料中，此欄位包含了不同的值。若您想要將它們都改為同一個值，可以在此輸入，要不然它們會保留各自原本的值。","restore":"復原","noMulti":"此輸入欄需單獨輸入，不容許多筆資料一起修改"}},"autoFill":{"cancel":"取消"},"buttons":{"copySuccess":{"_":"複製了%d筆資料","1":"複製了1筆資料"},"copyTitle":"已經複製到剪貼簿","excel":"Excel","pdf":"PDF","print":"列印","copy":"複製"},"searchPanes":{"collapse":{"_":"搜尋面版(%d)","0":"搜尋面版"},"emptyPanes":"沒搜尋面版","loadMessage":"載入搜尋面版中...","clearMessage":"清空"},"stateRestore":{"emptyError":"名稱不能空白。"},"select":{"columns":{"_":"選擇了%d欄資料"},"rows":{"1":"選擇了1筆資料","_":"選擇了%d筆資料"}},"zeroRecords":"沒有符合的資料"};

$('#example').DataTable( {
    "language": $dataTable_zh
} );

$dataTable_zh = {"processing":"處理中...","loadingRecords":"載入中...","lengthMenu":"顯示_MENU_項結果","info":"顯示第_START_至_END_項結果，共_TOTAL_項","infoEmpty":"顯示第0至0項結果，共0項","infoFiltered":"(從_MAX_項結果中過濾)","search":"搜尋:","paginate":{"first":"第一頁","previous":"上一頁","next":"下一頁","last":"最後一頁"},"aria":{"sortAscending":":升冪排列","sortDescending":":降冪排列"},"emptyTable":"目前沒有資料","datetime":{"previous":"上一頁","next":"下一頁","hours":"時","minutes":"分","seconds":"秒","amPm":["上午","下午"],"unknown":"未知","weekdays":["週日","週一","週二","週三","週四","週五","週六"],"months":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},"searchBuilder":{"add":"新增條件","condition":"條件","deleteTitle":"刪除過濾條件","button":{"_":"複合查詢(%d)","0":"複合查詢"},"clearAll":"清空","conditions":{"array":{"contains":"含有","equals":"等於","empty":"空值","not":"不等於","notEmpty":"非空值","without":"不含"},"date":{"after":"大於","before":"小於","between":"在其中","empty":"為空","equals":"等於","not":"不為","notBetween":"不在其中","notEmpty":"不為空"},"number":{"between":"在其中","empty":"為空","equals":"等於","gt":"大於","gte":"大於等於","lt":"小於","lte":"小於等於","not":"不為","notBetween":"不在其中","notEmpty":"不為空"},"string":{"contains":"含有","empty":"為空","endsWith":"字尾為","equals":"等於","not":"不為","notEmpty":"不為空","startsWith":"字首為","notContains":"不含","notStarts":"開頭不是","notEnds":"結尾不是"}},"data":"欄位","leftTitle":"群組條件","logicAnd":"且","logicOr":"或","rightTitle":"取消群組","title":{"_":"複合查詢(%d)","0":"複合查詢"},"value":"內容"},"editor":{"close":"關閉","create":{"button":"新增","title":"新增資料","submit":"送出新增"},"remove":{"button":"刪除","title":"刪除資料","submit":"送出刪除","confirm":{"_":"您確定要刪除您所選取的%d筆資料嗎？","1":"您確定要刪除您所選取的1筆資料嗎？"}},"error":{"system":"系統發生錯誤(更多資訊)"},"edit":{"button":"修改","title":"修改資料","submit":"送出修改"},"multi":{"title":"多重值","info":"您所選擇的多筆資料中，此欄位包含了不同的值。若您想要將它們都改為同一個值，可以在此輸入，要不然它們會保留各自原本的值。","restore":"復原","noMulti":"此輸入欄需單獨輸入，不容許多筆資料一起修改"}},"autoFill":{"cancel":"取消"},"buttons":{"copySuccess":{"_":"複製了%d筆資料","1":"複製了1筆資料"},"copyTitle":"已經複製到剪貼簿","excel":"Excel","pdf":"PDF","print":"列印","copy":"複製"},"searchPanes":{"collapse":{"_":"搜尋面版(%d)","0":"搜尋面版"},"emptyPanes":"沒搜尋面版","loadMessage":"載入搜尋面版中...","clearMessage":"清空"},"stateRestore":{"emptyError":"名稱不能空白。"},"select":{"columns":{"_":"選擇了%d欄資料"},"rows":{"1":"選擇了1筆資料","_":"選擇了%d筆資料"}},"zeroRecords":"沒有符合的資料"};

$('#example').DataTable( {

"language": $dataTable_zh

} );

固定表頭

DataTables example - Left and right fixed columns

    <link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>

$('#qtable').DataTable({
    scrollX: true,
    scrollY: window.innerHeight - 200,
    scrollCollapse: true,
    paging: false,
    bInfo: false,
    ordering: false,
    fixedColumns:   {
        left: 1,
    }
});

$('#qtable').DataTable({

scrollX: true,

scrollY: window.innerHeight - 200,

scrollCollapse: true,

paging: false,

bInfo: false,

ordering: false,

fixedColumns: {

left: 1,

}

});

scrollY: window.innerHeight - 200 使用視窗高度調整高度
bInfo: false 關閉底下 show 顯示
ordering: false 關閉排序功能

指定可排序欄位

編號不能排序，姓名可以

<table id="table_1" class="table table-striped table-hover" style="border-collapse: collapse; width: 100% !important;">
    <thead>
    <tr>
        <th class="no-sort">編號</th>
        <th>姓名</th>
        </th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<thead>

<tr>

</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

JavsScript 設定

$('#table_1').DataTable({
    searching: false,
    scrollX: true,
    scrollY: window.innerHeight - 260,
    scrollCollapse: true,
    paging: false,
    bInfo: false,
    ordering: true,
    columnDefs: [{
        orderable: false,
        targets: "no-sort"
    }]
});

$('#table_1').DataTable({

searching: false,

scrollX: true,

scrollY: window.innerHeight - 260,

scrollCollapse: true,

paging: false,

bInfo: false,

ordering: true,

columnDefs: [{

orderable: false,

targets: "no-sort"

}]

});

分頁控制

paging: false, // 是否顯示，下拉選擇及分頁列
displayLength: 25, // 預設每頁筆數
lengthChange: false, // 分頁下拉顯示

paging: false, // 是否顯示，下拉選擇及分頁列

displayLength: 25, // 預設每頁筆數

lengthChange: false, // 分頁下拉顯示

How to Build a Custom Pagination Component in React (freecodecamp.org)

這裡有自訂 siblingCount 的範例，我看不懂我不會 ...

info 顯示

DataTables example - Multiple table control elements

預設

$('#example').dataTable( {
  "dom": 'lrtip'
} );

$('#example').dataTable( {

"dom": 'lrtip'

} );

上下都有

$('#example').dataTable( {
  dom: '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
} );

$('#example').dataTable( {

dom: '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'

} );

將筆數移到上方

$('#example').dataTable( {
  "dom": '<"top"i>rt<"bottom"flp><"clear">'
} );

$('#example').dataTable( {

"dom": '<"top"i>rt<"bottom"flp><"clear">'

} );

重複使用

如果使用了 ajax 就會重複使用 .DataTable()，這時就必須先將前一個銷毀才能建立下一個

how to destroy and reinitialize the datatable — DataTables forums

$('#id_table_1').DataTable().clear().destroy();

1	$('#id_table_1').DataTable().clear().destroy();

移除排序符號

Remove sorting arrows in jQuery DataTables

.dataTable > thead > tr > th[class*="sort"]:before,
.dataTable > thead > tr > th[class*="sort"]:after {
    content: "" !important;
}

.dataTable > thead > tr > th[class*="sort"]:before,

.dataTable > thead > tr > th[class*="sort"]:after {

content: "" !important;

}

將表頭固定在網頁上方

DataTables example - With FixedHeader

$('#myTable').DataTable( {
    fixedHeader: true
} );

$('#myTable').DataTable( {

fixedHeader: true

} );

thead CSS

How I can change background-color for thead? — DataTables forums

table.dataTable thead {
    background-color: #5e5e5e;
    color: #fff;
}

table.dataTable thead {

background-color: #5e5e5e;

color: #fff;

}

點分頁捲動回上方

正常使用

$table.on('page.dt', function() {
    $('html, body').animate({
        scrollTop: $(".dataTables_wrapper").offset().top
    }, 50);
});

$table.on('page.dt', function() {

$('html, body').animate({

scrollTop: $(".dataTables_wrapper").offset().top

}, 50);

});

Ajax

$table.on('xhr.dt', function() {
    $('html, body').animate({
        scrollTop: $(".dataTables_wrapper").offset().top
    }, 50);
});

$table.on('xhr.dt', function() {

$('html, body').animate({

scrollTop: $(".dataTables_wrapper").offset().top

}, 50);

});

使用 scrollY 的情況

$table.on('page.dt', function() {
    $(".dataTables_scrollBody").scrollTop(0);
    $(".dataTables_scroll").scrollTop(0);
});

$table.on('page.dt', function() {

$(".dataTables_scrollBody").scrollTop(0);

$(".dataTables_scroll").scrollTop(0);

});

定義行高

How to set max row height with scrollbar? — DataTables forums

CSS

div.scrollingCell {
    max-height: 8em;
    overflow: auto;
}

div.scrollingCell {

max-height: 8em;

overflow: auto;

}

DataTable JavsScript

{
    data: null,
    width: '260px',
    render: function (data){
        return '<div class="scrollingCell">'+ data['content'] +'</div>';
    },
    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
        $(cell).attr('data-title', '課文')
    },
},

{

data: null,

width: '260px',

render: function (data){

return '<div class="scrollingCell">'+ data['content'] +'</div>';

createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {

$(cell).attr('data-title', '課文')

2,516 total views, 1 views today

DataTable 1.12 - 基本使用

參考資源

安裝

中文化

固定表頭

指定可排序欄位

分頁控制

info 顯示

重複使用

移除排序符號

將表頭固定在網頁上方

thead CSS

點分頁捲動回上方

定義行高

Related Post

發佈留言

DataTable 1.12 - 基本使用

參考資源

安裝

中文化

固定表頭

指定可排序欄位

分頁控制

info 顯示

重複使用

移除排序符號

將表頭固定在網頁上方

thead CSS

點分頁捲動回上方

定義行高

Related Post

CSS - 自定義 Radio, Checkbox 為方塊

Chrome - 取消淺黃色表單自動輸入

Bootstrap - DatePicker

發佈留言