DataTables表格外掛使用說明

104828720發表於2019-02-16

DataTables簡介

  • 與EasyUI的Datagrid作用一樣，比easyui更漂亮

  • Datatables是一款jquery表格外掛。它是一個高度靈活的工具，可以將任何HTML表格新增高階的互動功能。

  • 支援分頁、排序、搜尋

  • 支援4種資料來源

  • 支援多種主題

  • 擁有多種擴充套件

檔案引入

  • 至少引入如下3個檔案

<link rel="stylesheet" href="css/jquery.dataTables.min.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js" ></script>

多種樣式

  • Bootstrap 3

  • Foundation

  • Semantic UI

  • jQuery UI

  • Base

  • Bootstrap 4

匯入的檔案不同，具體請看官網示例：https://www.datatables.net

完整Table的HTML結構

<table id="example" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>item1</th>
            <th>item1</th>
            <th>item1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item1</td>
            <td>item1</td>
            <td>item1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

  • 想使用DataTables表格外掛，至少要寫<table></table>標籤，然後再通過js渲染

初始化與常用配置

  • 預設初始化

$(`#example`).DataTable();

  • 配置初始化

$(`#example`).DataTable({
    "scrollY" : 350,
    "ajax" : `http://wt.com`,
    "serverSide" : true
});

  • 常用配置項

info //是否顯示左下角資訊
ordering  //是否開啟排序
paging  //是否開啟分頁
searching  //是否開啟查詢
serverSide
ajax
data
lengthMenu: [ 10, 25, 50, 75, 100 ]  //定義每頁顯示記錄數

DataTables支援四種資料來源

  • HTML(DOM)資料來源——後臺模板拼接

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
    </tbody>
</table>

  • Javascript資料來源(Array/Objects)——優先順序比HTMLDOM高

有2種型別：

二維陣列：
var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ]
];

物件陣列(必須配合columns配置項)：
var dataSet = [
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh",
        "extn":       "8422"
    }
];

$(document).ready(function() {
    $(`#example`).DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

  • Ajax with client-side processing資料來源

伺服器返回的資料格式必須是：
{
    "data": [
        [
          "Howard Hatfield",
          "Office Manager",
          "San Francisco",
          "7031",
          "2008/12/16",
          "$164,500"
        ],
        [
          "Hope Fuentes",
          "Secretary",
          "San Francisco",
          "6318",
          "2010/02/12",
          "$109,850"
        ]
    ]
}
或者
{
    "data": [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        },
        {
            "name":       "Garrett Winters",
            "position":   "Director",
            "salary":     "$5,300",
            "start_date": "2011/07/25",
            "office":     "Edinburgh",
            "extn":       "8422"
        }
    ]
}

$(document).ready(function() {
    $(`#example`).DataTable( {
        "ajax": `../ajax/data/arrays.txt`
    } );
} );
或
$(document).ready(function() {
    $(`#example`).DataTable( {
        "ajax": {
            "url": "data.json",
            "data": {
                "user_id": 451
            }
        }
    } );
} );

  • Ajax with server-side processing資料來源

伺服器返回的資料格式：
{
    "draw" : 1,
    "recordsTotal" : 20,
    "recordsFiltered" : 20,
    "data" : [
        [],[]
    ]
}

自定義列

  • 在DataTables表格初始化的時候進行初始化，使用columns或者columnDefs屬性進行自定義列的資訊

  • 能自定義列的標題、顯示內容、樣式、別名、資料繫結、是否提供排序、是否提供搜尋過濾、列寬、預設內容等等

  • 示例

$(`#example`).DataTable({
    "ajax" : `{:U("getList")}`,
    "serverSide" : true,
    "columns": [
        {
            "searchable": false,
            "name": "engine",
            "title" : "wutao",
            "orderable": false,
            "className": "my_class",
            "render": function ( data, type, full, meta ) {
                return `<a href="`+data+`">Download</a>`;
            }
        },
        null
    ]
});

伺服器模式的請求引數

  • 當使用伺服器模式"serverSide" : true時，瀏覽器會發出一個GET請求來獲取資料來源

  • 請求的查詢引數如下：

draw:1   //請求次數，用於響應是也要帶回來
columns[0][data]:0       //第一列繫結的資料來源標識，二維陣列就是數字，物件陣列就是key
columns[0][name]:engine      //第一列別名
columns[0][searchable]:false //不可搜尋
columns[0][orderable]:true   //不可排序
columns[0][search][value]:   //搜尋的條件
columns[0][search][regex]:false   //搜尋是否使用正則

.....  //有多少列就有多少個columns[n]

order[0][column]:0   //指定排序的列
order[0][dir]:asc    //指定列的排序方式
start:0     //起始下標
length:10   //每頁記錄數
search[value]:    //全域性搜尋條件
search[regex]:false   //全域性搜尋是否使用正則
_:1492657609627      //自帶標示不用理會

國際化

  • 在DataTables表格初始化時，使用language屬性對錶格中的文字資訊進行靈活修改

  • 示例：

$(`#example`).dataTable( {
    "language": {
        "processing": "DataTables is currently busy",
        "emptyTable": "No data available in table",
        "info": "Showing page _PAGE_ of _PAGES_",
        "lengthMenu": "每頁顯示 _MENU_ 條記錄",
        "search": "搜尋:"
    }
} );

查詢過濾（搜尋）

  • 列表專案

自定義表格控制元素

  • 在DataTables表格控制元件初始化時，使用dom屬性和initComplete回撥函式來統一配置

  • 應用場景：把自定義按鈕整合到DataTables上面

$(`#example`).dataTable( {
    "dom": "l<`#customid`>ftip"，
    "initComplete": function(){
        $("#customid").append("<button></button>");
    }
} );

  • 自定義表格DOM最好把柵格加進去

$(`#example`).dataTable( {
    "dom": "<`.row`<`#customid.col-xs-4`><`.col-xs-8`f>><`.row`<`.col-xs-12`t>>",
    "initComplete": function(){
        $("#customid").append("<button></button>");
    }
} );

  • drawCallback比initComplete優先執行

整合iCheck核取方塊

  • Html結構

<input type="checkbox" class="i-checks" id="checkAll">  //表頭

  • JS部分

$(`#example`).DataTable({
    "ajax" : `{:U("getList")}`,
    "serverSide" : true,
    "columns": [
        {
            "render": function ( data, type, row, meta ) {
                return `<input type="checkbox" class="i-checks item" name="ids[]" value="`+row.id+`">`;
            }
        },
        null
    ],
    "drawCallback": function(){
        checkbox_init();
    }
});

//全選，全不選
function checkbox_init(){
    $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})

    $(`#checkAll`).on(`ifChecked`, function(event){
        $(this).off(`ifUnchecked`);
        $(`.item`).iCheck(`check`);
        $(this).on(`ifUnchecked`, function(event){
            $(`.item`).iCheck(`uncheck`);
        })
    });

    $(`.item`).on(`ifUnchecked`,function(event){
        $(`#checkAll`).off(`ifUnchecked`);
        $(`#checkAll`).iCheck(`uncheck`);
    }).on(`ifChecked`,function(event){
        var state = true;
        $(`.item`).each(function(i){
            if(!$(this).is(`:checked`)){
                state = false;
            }
        });
        if(state){
            $(`#checkAll`).iCheck(`check`);
        }
    });
}

相關文章