前端插件之Datatables使用--下篇

時間 2020-06-04

標籤前端插件 datatables 使用下篇简体版

原文原文鏈接

工欲善其事，必先利其器css

本系列文章介紹我在運維繫統開發過程當中用到的那些順手的前端插件，上一篇文章介紹了Datatables插件的基本使用，這一篇文章做爲上一篇的延續，會介紹Databases的一些高級用法，例如從不一樣的數據源獲取數據、修改數據最終呈現方式、操做Dom改變頁面功能、開啓服務端數據處理等html

數據加載

上篇文章中的全部數據都是直接渲染的html中的table數據，datatables還支持其餘幾種數據源，以方便實現更靈活的控制前端

從數組中獲取

<table id="myTable-x" class="display" style="width:100%"></table>

$(document).ready(function() {
    var dataSet = [
      ["3","https://ops-coffee.cn","2018-07-03"],
      ["9","https://demo.ops-coffee.cn", "2019-08-06"],
    ];

    $('#myTable-x').DataTable({
        "data": dataSet,
        "columns": [
          { title: "Id" },
          { title: "Site" },
          { title: "Date" },
        ]
    })
});

data： 指定數組git

columns： 配置每一列的titlegithub

注意：從數組中獲取數據必定要有表頭，若是沒有則可能會報下邊的錯：ajax

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

解決方法就是datatables添加columns配置，或者寫上table的theadjson

<table id="myTable-x" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Site</th>
            <th>Date</th>
        </tr>
    </thead>
</table>

從對象中獲取

<table id="myTable-x" class="display" style="width:100%"></table>

$(document).ready(function() {
    var dataSet = [
      {"Id":"3","Site":"https://ops-coffee.cn","Date":"2018-07-03"},
      {"Id":"9","Site":"https://demo.ops-coffee.cn","Date":"2019-08-06"},
    ];

    $('#myTable-x').DataTable({
        "data": dataSet,
        "columns": [
          {"data": "Id", "title": "Id"},
          {"data": "Site", "title": "Site"},
          {"data": "Date", "title": "Date"},
        ]
    })
});

使用對象數組，必定要配置columns的data，告訴DataTables每列對應的屬性，title配置可選，添加title會給表格添加表頭後端

從實例中獲取

$(document).ready(function() {
    function dataSet(id, site, date) {
      this.id = id;
      this.site = site;
      this.date = date;
    };

    $('#myTable-x').dataTable({
      data: [
        new dataSet("3", "https://ops-coffee.cn", "2018-07-03"),
        new dataSet("9", "https://demo.ops-coffee.cn", "2019-08-06"),
      ],
      columns: [
          {"data": "id", "title":"Id"},
          {"data": "site", "title":"Site"},
          {"data": "date", "title":"Date"}
      ]
    });
});

Ajax異步獲取

Datatables還支持Ajax的方式異步加載數據，簡單的方式是直接配置一個url地址便可api

$(document).ready(function() {
    $('#myTable-x').dataTable({
        "ajax": 'sdata.json'
    });
});

ajax接收的數據能夠是數組或者對象，注意columns的配置，能夠對應參考前文兩種格式數據的處理數組

結果數據處理

上邊的table能夠發現有個site列的內容是一個網址，若是咱們想讓網址可以點擊該如何實現呢？能夠利用columns的render屬性對展現結果進行更改

$(document).ready(function() {
    $('#myTable-x').dataTable({
        "ajax": 'sdata.json',
        "columns": [
            {"data": "id", "title":"Id"},
            {
                "data": "site", 
                "title":"Site",
                "render": function (data, type, row) {
                  return '<a href='+data+' target="_blank">'+data+'</a>'
                }
            },
            {"data": "date", "title":"Date"}
        ]
    });
});

render後邊跟了個函數，每當數據表須要獲取列中某個單元格的數據時render函數都會執行，且函數可能會被執行屢次，函數默認接收三個參數，意思分別是：

data： 單元格的具體數據，例如https://ops-coffee.cn

type： 標識了這一次調用的請求類型，會有filter、display、type、sort

row： 這一行的完整數據源，若是像Demo示例傳了對象數據，那麼能夠經過row.site獲取到這一行site列的數據

拿到參數進行一系列的處理後能夠經過return返回最終想要展現的內容

固然也能夠經過columns在表格末尾添加一列以實現編輯、刪除的按鈕展現

"columns": [
    {"data": "id", "title":"Id"},
    {
        "data": "site", 
        "title":"Site",
        "render": function (data, type, row) {
          return '<a href='+data+' target="_blank">'+data+'</a>'
        }
    },  
    {"data": "date", "title":"Date"},
    {   
      "data": "id",
      "title": "操做",
      "render": function (data, type, row) {
        return '<a href="#update/'+row.id+'/" class="btn btn-warning btn-sm">編輯</a> ' +
               '<a href="#delete/'+row.id+'/" class="btn btn-danger btn-sm">刪除</a>'
      } 
    }   
]

最終呈現結果以下圖

Dom操做

若是我不須要datatables顯示左上角的每頁顯示條數信息，而要換成一個添加按鈕改怎麼作呢？這裏能夠藉助datatables的dom來實現

默認狀況下表格都會有左上角的每頁顯示條數、右上角的搜索、左下角的表格信息、右下角的分頁、中間的數據加載等待以及表格自己，這些都是datatables的DOM，它們實際上就是一個div包裹起來的select、input之類的html標籤，datatables中的每一個DOM都與一個字母相對應，他們的對應關係以下：

l： length，表明左上角的每頁顯示條數控件

f： filtering，表明右上角的搜索控件

t： table，表明表格自己

i： information，表明左下角的表格信息控件

p： pagination，表明右下角的分頁控件

r： processing，表明中間數據加載等待提示控件

這些控件在datatables裏能夠經過配置dom來控制他們的顯示位置，以及是否顯示，默認的顯示順序是lfrtip

$('#myTable-x').dataTable({
    "dom": 'lfrtip'
})

你若是不想顯示某個控件，能夠經過去掉dom配置項裏對應的字母實現，同時Datatables支持四個自定義的標籤，經過這四個標籤能夠方便的來修改DOM的展現

< > 尖括號就表明html裏的div

<"class"> 表明了添加了class的div

<"#id"> 表明了添加了id的div

<"#id.class"> 表明添加了id和class的div

咱們想把右上角的每頁顯示條數控件換成添加按鈕的話能夠這樣寫

$('#myTable-x').dataTable({
    "dom": '<"#add-btn.toolbar">frtip'
})

$("#add-btn.toolbar").html(
  '<button href="#add" class="btn btn-success btn-sm"> + 添加</button>'
)

遇到樣式問題，須要添加css

<style type="text/css">
  .toolbar {float:left}
</style>

這樣就完美實現了

服務器端處理

Datatables支持使用服務端進行數據處理，當開啓服務端數據處理後，Datatables將在頁面執行分頁、排序、搜索等操做時向服務端發出Ajax請求，Ajax請求會傳遞許多變量給服務端，服務端接收到請求後根據變量的值對數據進行處理，處理完成按照固定的格式返回給前端頁面，頁面對返回的數據進行渲染提供給用戶查看

開啓服務器模式只須要兩個設置項serverSide和ajax

$('#myTable-x').dataTable({
    "serverSide": true,
    "processing": true,
    "ajax": '/api/site/data'
})

serverSide： 爲true時表示開啓服務端處理模式

processing： 爲true時會開啓數據處理中的提示，非必須

ajax： 指定服務器端的地址，能夠像上邊同樣是個字符串，也能夠像jQuery.ajax同樣做爲一個對象使用，例如我想傳遞額外的參數（datatables默認會給後端傳遞許多的參數，下邊有講）給後端服務器的話，能夠這樣用

$('#myTable-x').dataTable({
    "serverSide": true,
    "processing": true,
    "ajax": {
        "url": "/api/site/data",
        "data": function (d) {
            d.type = 'ops-coffee';
        }
    }
})

data： 能夠在發送請求給後端時額外增長type=ops-coffee的參數

發送到服務器端的參數

當開啓服務端數據處理後，默認會給服務端傳遞許多參數，大概以下：

draw：繪製計數器，主要用來確保Ajax從服務器端接收到的數據是對應同一次請求的
start：第一條數據的起始位置
length：每頁顯示的條數
search[value]：全局的檢索關鍵字
order[i][column]：告訴服務器哪些列是須要排序的，i爲排序列的序號，下邊的i相同含義，注意i是從0開始的
order[i][dir]：告訴服務器排序的方式"desc","asc"
columns[i][data]：columns上定義的data屬性值
columns[i][name]：columns上定義的name屬性值
columns[i][searchable]：告訴服務器哪些列能夠被搜索
columns[i][orderable]：告訴服務器哪些列能夠進行排序
columns[i][search][value]：告訴服務器某些列的具體搜索條件

若是須要後臺分頁，那麼須要拿到start、length兩個參數作相應的處理，

若是有搜索的內容，那麼須要拿到serch[value]參數作處理

服務端返回數據的格式

服務端須要返回datatables能夠處理的數據格式，具體數據格式以下：

{
    "draw": 1,
    "recordsTotal": 7,
    "recordsFiltered": 7,
    "data": [
        {
            "id": 3,
            "site": "https://ops-coffee.cn",
            "date": "2018-07-03"
        },
        {
            "id": 9,
            "site": "https://demo.ops-coffee.cn",
            "date": "2019-08-06"
        }
        // 省略其餘結果
    ]
}

draw： 客戶端調用服務端次數標識，客戶端傳過來是什麼原樣返回回去便可，無需修改

recordsTotal： 數據總條數，沒有過濾的數據總條數

recordsFiltered： 過濾後符合要求的條數，若是沒有搜索參數那麼這個值與recordsTotal一致

data： 須要顯示的具體數據，json格式

API調用

Datatables提供了強大的API來處理表格上的數據，能夠經過API添加數據到已經存在的表格，或者對已經存在的數據進行操做，API的類型很是豐富，詳細的信息能夠查閱官網，使用方法以下：

跳轉到頁

跳轉到第3頁：

var table = $('#myTable').DataTable()

table.page(2).draw(false)

page(2)： page爲分頁方法，後邊的2表示跳轉到第幾頁，能夠是一個數字，也能夠是first、next、previous、last這樣的字符串，當爲數字時要從0算起，例如示例中爲2其實是跳轉到了第3頁

draw(false)： 對錶格進行重繪以實現表格更新的顯示，大多數的api操做都不會直接更新在頁面上，因此須要調用下draw，默認狀況下重繪後分頁會被重置回到第一頁，當設置爲false時分頁不會被重置

搜索某列

搜索第2列包含https://ops-coffee.cn的行

var tablx = $('#myTable').dataTable()

tablx.api().column(1).search('https://ops-coffee.cn').draw()

首先須要注意這個例子中的API調用使用了.api()，這是由於上一個例子在初始化時用了.DataTable()而這個例子初始化時用了.dataTable()，僅僅是d字母大小寫的區別而已，但意義確不一樣，前者直接返回API實例，後者返回的是jQuery實例

完整Demo

爲了方便你們學習，我寫了個完整的demo，你能夠在線查看效果或下載代碼應用到本身的項目中

在線Demo地址：https://demo.ops-coffee.cn/datatables/

Github源碼地址：https://github.com/ops-coffee/demo/tree/master/datatables

相關文章推薦閱讀：

原文出處：https://www.cnblogs.com/37Y37/p/11350164.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。