Datatables 表格插件

JS 插件文檔庫邀你一起協(xié)同創(chuàng)作 - 簡書

Datatables

這是我見過最強大的在線表格插件了，官方文檔也比較完整，建議直接看英文版本，初次看可能會有點邏輯混亂，但是多看看，每次都有一些收獲。這里我還是通過示例的方式，來介紹一下數(shù)據(jù)獲取以及參數(shù)傳遞的方式。

1. 準備

相比Bootstrap-Table，Datatables的前臺頁面中需要定義表格的表頭，否則將無法顯示，代碼如下：

<table id="table" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th>Item name</th>
      <th>Item price</th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
      <th>操作</th>
    </tr>
  </thead>
</table>

在前后各多出一列，后面會介紹它的用處。表頭定義好后，接下來就是引入庫文件了，1個css文件，2個js文件。如下：

<!-- DataTables css -->
<link rel="stylesheet" href="/datatables.net-bs/css/dataTables.bootstrap.min.css">

<!-- DataTables js-->
<script src="/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

js文件依然還是放到最底下，</body>之前即可，引入正確的庫文件之后，準備工作就OK了。

2. 初步使用

Datatables提供了4種獲取表格數(shù)據(jù)的方式，這里只介紹：通過Ajax異步獲取的方式。數(shù)據(jù)格式依然還是包含數(shù)據(jù)對象的數(shù)組，而且跟之前是同一組數(shù)據(jù)，看下初步效果：

image.png

同樣的配方，不一樣的味道，js中代碼實現(xiàn)如下：

$('#table').DataTable({
    ajax: {
        url: '/json/data.json',
        dataSrc: ''
    },
    columns: [
        { "data": null , defaultContent: '' },
        { "data": "id" },
        { "data": "name"},
        { "data": "price"},
        { "data": "column1" },
        { 'data': "column2" },
        { "data": "column3" },
        { "data": "column4" },
        { "data": null , defaultContent: ''}
    ]
});

這里需要注意的是：

  1. columns 參數(shù)中數(shù)組的對象數(shù)量，一定要跟前臺表格中th保持一致，否則無法渲染出來。
  2. 由于示例中，返回的是包含對象的數(shù)組類型，于是需要設(shè)置dataSrc為空，否則也無法得到數(shù)據(jù)。Datatables提供多種返回數(shù)據(jù)格式，具體參照這里Ajax sourced data

3. 功能介紹

由于Datatables的功能實在太多了，這里也不可能全部介紹到，根據(jù)實際項目經(jīng)驗，主要介紹一些比較實用，或者跟Bootstrap-Table有差異性的一些功能點。

（1）操作區(qū)

還記得上面表格頁面預留的兩列吧，想必你也猜出來了，最右邊的那列，就是用來放操作按鈕的，我們添加一個表格參數(shù)columnDefs用來定義列。

columnDefs: [
  {
        targets: -1,
        visible: false,
        sortable: false,
        render: function(data, type, row){
            return '<a href="#" title="詳情">' + 
            '<i class="glyphicon glyphicon-eye-open"></i> ' + 
            '</a>'+ 
            '<a href="#editProject" data-toggle="modal" data-id="' + row.p_id +'" title="修改">' + 
            '<i class="glyphicon glyphicon-pencil"></i> ' + 
            '</a>'+
            '<a href="#delProject" data-toggle="modal" data-id="' + row.p_id +'" title="刪除">' +
            '<i class="glyphicon glyphicon-trash text-danger"></i> ' + 
            '</a>';
        }
    }
],

targets選擇目標列，-1代表倒數(shù)第1列，render渲染的樣式。最后表格效果如下圖：

image.png

后面具體的實現(xiàn)方法，就不介紹了，你可以使用modal彈出框，也可以跳轉(zhuǎn)到其他頁面。

（2）響應(yīng)式

在這個移動優(yōu)先的互聯(lián)網(wǎng)時代，不適應(yīng)手機端的頁面都不好意思拿出來。Datatables的Responsive擴展，似乎比較優(yōu)雅的解決了，在線表格在手機端無法完美顯示的痛點。

image.png

上面預留的第一列發(fā)揮了它的用處，當點擊+號時，自動展開隱藏的列，是不是比較優(yōu)雅的解決了，在線表格在手機端查看的問題。實現(xiàn)方法非常簡單，首先引入Responsive擴展的庫文件，如下：

<link rel="stylesheet" href="/datatables.net-responsive-bs/css/responsive.bootstrap.min.css">

<!-- datatables responsive -->
<script src="/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/datatables.net-responsive-bs/js/responsive.bootstrap.min.js"></script>

在表格參數(shù)中加入responsive: true即可，當屏幕尺寸漸漸縮小的時候，后面的列就會自動隱藏到+號里面。那么能不能定義優(yōu)先級，讓我去定義哪些列優(yōu)先隱藏，哪些列后隱藏。當然可以，在columns中定義responsivePriority屬性即可。如下：

columns: [
    { "data": null, sortable: false, defaultContent: '' , responsivePriority:  2},
    { "data": "id" },
    { "data": "name", responsivePriority:  1},
    { "data": "price" , responsivePriority:  3},
    { "data": "column1" },
    { 'data': "column2" },
    { "data": "column3" },
    { "data": "column4" },
    { "data": null , defaultContent: '' ,responsivePriority: 4}
],

值越小，顯示優(yōu)先級越高，沒有設(shè)置值的地方，按照列的先后順序依次隱藏。

（3）按鈕功能

這個是Datatables比較有特色的一個功能，自由度比較高，可以自定義一系列的功能。它是通過Buttons的擴展來實現(xiàn)的，在介紹Buttons之前，需要先了解一下DOM這個參數(shù)，也就是表格的布局。

image.png

如上圖所示，整個表格頁面總共分為了5大塊，這5大塊分別用一個字母來表示，分別為lftip，這是默認的布局。DOM設(shè)置參考：

  • l - Length changing
  • f - Filtering input
  • t - The Table!
  • i - Information
  • p - Pagination
  • < and > - div elements
  • <"#id" and > - div with an id
  • <"class" and > - div with a class
  • <"#id.class" and > - div with an id and class

如果我們要使用Buttons擴展，就需要給它預留一個位置，所以我們要在表格參數(shù)中，加上DOM的配置。

簡單介紹了下DOM，現(xiàn)在我們引入Buttons的擴展文件，官方文檔默認提供了5個功能按鈕，需要引入一些第三方庫，我都一一標注出來了，如下：

<!-- DataTable buttons -->
<script src="/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<!-- buttons 打印功能 -->
<script src="/datatables.net-buttons/js/buttons.print.min.js"></script>
<!-- buttons 導出功能 -->
<script src="/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/jszip/dist/jszip.min.js"></script>
<!-- buttons 生成PDF功能 -->
<script src="/pdfmake/build/pdfmake.min.js"></script>
<script src="/pdfmake/build/vfs_fonts.js"></script>

庫文件引入之后，接下來配置一下DOM參數(shù)以及Buttons參數(shù)，如下：

dom: '<"pull-left"B>ft<"pull-left"i>p', 
buttons: [
    'copy', 'print', 'excel', 'csv', 'pdf'
],

從上面布局可以看出，Button靠左上，搜索右上，表格中間，信息在左下，分頁在右下。效果如下圖：

image.png

如果你正確的引入了上述的那些庫文件，且dom和buttons配置正確，那么不用寫一句代碼就可以直接擁有：復制，打印，導出excel，導出csv，制作PDF的功能了。

但我并不滿足上述的一些功能，我想自定義一些按鈕，完全沒有問題。假如，我想添加一個刷新按鈕，在buttons里添加reload如下：

buttons: [
    'copy', 'print', 'excel', 'csv', 'pdf', 'reload'
]

然后加上reload的定義：

$.fn.dataTable.ext.buttons.reload = {
    text: '<i class="glyphicon glyphicon-refresh"></i>',
    action: function ( e, dt, node, config ) {
        dt.ajax.reload();
    }
};

text為顯示的樣式，action為執(zhí)行的操作，dt.ajax.reload()指的是表格刷新。設(shè)置完之后，你會發(fā)現(xiàn)按鈕組那多了一個按鈕，如下圖：

image.png

你會發(fā)現(xiàn)那個圖標挺好看的呀，默認的那幾個按鈕也變成圖標就好了，就像下圖所示：

image.png

于是修改一下buttons參數(shù)如下：

buttons: [
    {
        text: '<i class="glyphicon glyphicon-copy" title="復制"></i>',
        extend: 'copy'
    }, {
        text: '<i class="glyphicon glyphicon-print" title="打印"></i>',
        extend: 'print'
    }, {
        text: '<i class="glyphicon glyphicon-save-file" title="導出excel"></i>',
        extend: 'excel'
    }, {
        text: '<i class="glyphicon glyphicon-list-alt" title="導出csv"></i>',
        extend: 'csv'
    }, {
        text: '<i class="glyphicon glyphicon-file" title="生成pdf"></i>',
        extend: 'pdf'
    }, 'reload'
],

加上title屬性，當鼠標停留的時候，可以顯示提示文本。結(jié)合Buttons擴展，我們可以在表格中實現(xiàn)很多功能。

（4）編輯功能

編輯模塊在Datatables中是收費的，其實我們通過「操作區(qū)」也是可以實現(xiàn)編輯需求的，這里我再介紹一種具有Datatables特色的編輯功能。編輯不同于其他功能按鈕可以獨立存在，編輯功能需要先獲取到該行的數(shù)據(jù)，然后才能執(zhí)行后續(xù)操作。

獲取行的操作，意味著需要選擇某行，這里再引入一個擴展模塊Select，導入庫文件：

<!-- datatables select  -->
<script src="/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="/datatables.net-select-bs/js/select.bootstrap.min.js"></script>

表格參數(shù)中，添加Select的配置，設(shè)置為單選：

select: 'single',

結(jié)合Buttons模塊，再添加一個編輯按鈕，上面已經(jīng)介紹過了，相信你會添加。主要看下編輯按鈕的動作。

$.fn.dataTable.ext.buttons.edit = {
    text: '<i class="glyphicon glyphicon-pencil"></i>',
    action: function ( e, dt, node, config ) {
        var rows = dt.rows({ selected: true }); // 獲取選中的行
        var selectedCount = rows.count();       // 選中的行數(shù)量
        var data = rows.data()[0];              // 得到行數(shù)據(jù)
        if(selectedCount){
            var selectedId = data.id;
            $('#edit').modal('show');
            $('#edit small').html('編輯項目ID：' + selectedId);
            $('#edit form input[name=name]').val(data.name);
            $('#edit form input[name=price]').val(data.price);
            $('#edit form input[name=column1]').val(data.column1);
            $('#edit form input[name=column2]').val(data.column2);
            $('#edit form input[name=column3]').val(data.column3);
            $('#edit form textarea[name=column4]').val(data.column4);
        }else{
            alert('請選擇行再操作');
        }
    }
};

這里有一個判斷，選中了行，才能接下來的操作。示例代碼就寫到這里，實際執(zhí)行編輯功能，需要結(jié)合后臺來實現(xiàn)。

好了，Datatables的介紹，我想就講到這里，這里通過示例，大概介紹了Responsive、Buttons、Select擴展模塊的使用。由于功能實在太多，不可能面面俱到，而且官方文檔的介紹已經(jīng)很詳細了，建議沒事翻翻文檔。

更多Chat...

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容