datatables是一款基于JQuery的插件用來優(yōu)化table，支持表格分頁、搜索、排序、顯示條數(shù)、異步加載等功能
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
datatables是一款基于JQuery的表格插件，主要用來優(yōu)化table，支持表格分頁、搜索、排序、顯示條數(shù)、異步加載等眾多好用的功能 基本使用需要用到的JS和CSS文件位于項目代碼下的media目錄中，需要將這個目錄中的對應文件放入你的項目里，這一步不贅述
<!-- 加載 Jquery --><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><!-- 加載 Datatables --><link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /><script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="myTable" class="display" style="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>
<tbody>
<tr>
<td>Ops Coffee</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>18</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<!-- 中間省略一些tr數(shù)據(jù) -->
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot></table>
$(document).ready( function () {
$('#myTable').DataTable();
});
功能開啟/關閉默認界面下除了原始的table外，還為table額外增加了搜索、列排序、分頁及信息顯示這些內(nèi)容，如果不需要其中一個或多個可以通過以下設置隱藏 $('#myTable').DataTable({ "paging": false, "ordering": false, "info": false, "searching": false,
});paging： 控制分頁是否開啟，默認開啟，開啟后會顯示表格左上角的每頁行數(shù)選擇和右下角的頁碼跳轉 ordering： 控制是否進行排序，默認開啟，且默認會對第一列數(shù)據(jù)進行排序 info： 控制是否顯示表格左下角的信息，默認開啟 searching： 控制是否顯示表格右上角的搜索，默認開啟 排序配置單列排序可以通過 "order": [[ 3, "desc" ]], 列號默認從0開始算起，這里的3實際上對應的是第4列，這點要注意，以下所有用到列號的地方都是從0開始 注意：開啟 多列排序當然也可以在order里邊配置同時按多列排序 "order": [[ 3, "desc" ], [ 0, "desc" ]], 如上配置的意思是先按照3列進行排序，如果3列相同，則再按照0列進行排序 搜索框提示設置"fnPreDrawCallback": function( oSettings ) {
$('.dataTables_filter input').attr({'name':'search','placeholder': '按名稱搜索'});//提示},屏蔽錯誤提示和自定義錯誤提示官方參考：https://datatables.net/reference/event/error //初始化之前設置$.fn.dataTable.ext.errMode = 'none'; //屏蔽掉報錯彈窗
$('#Table')//初始化的datatables
.on( 'error.dt', function ( e, settings, techNote, message ) { //接收并打印錯誤信息，也可自行添加相應處理方法
console.log( 'An error has been reported by DataTables: ', message );
} ).DataTable({ //其他配置
});隱藏列可以通過 "columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false,
}]targets： 指定列 visible： 是否可顯示 searchable： 是否可搜索，當僅設置 注意：開啟 動態(tài)隱藏列/**
* #tagTable 表格id
* column(5) 第6列
* visible(false) true 顯示 false不顯示
*/$('#tagTable').DataTable().column(5).visible(false);語言配置默認提示語都是英文，可以通過 "language": {
"decimal": "", "emptyTable": "表中數(shù)據(jù)為空", "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", "infoEmpty": "顯示第 0 至 0 項結果，共 0 項", "infoFiltered": "(由 _MAX_ 項結果過濾)", "InfoPostFix": "", "thousands": ",", "lengthMenu": "顯示 _MENU_ 項結果", "loadingRecords": "載入中...", "processing": "處理中...", "search": "搜索:", "zeroRecords": "沒有匹配結果", "Paginate": {
"sFirst": "首頁", "sPrevious": "上一頁", "sNext": "下一頁", "sLast": "尾頁"
},
"Aria": {
"sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列"
}
}狀態(tài)保持可以通過 "stateSave": true, 分頁類型可以通過 "pagingType": "simple_numbers", simple_numbers： 類型會顯示上一頁、下一頁按鈕和頁碼，這也是默認的分頁類型 其他幾種分頁類型如下： numbers： 僅顯示頁碼 simple： 僅顯示上一頁、下一頁按鈕 full： 僅顯示首頁、尾頁、上一頁和下一頁按鈕 full_numbers： 顯示首頁、尾頁、上一頁、下一頁按鈕和頁碼 first_last_numbers： 顯示首頁、尾頁按鈕和頁碼 滾動配置當table的寬、高超過頁面設置大小時，可以通過以下配置來添加滾動條 "scrollX": "true","scrollY": "200px","scrollCollapse": true, scrollX： 允許水平滾動條 scrollY： 設置垂直body的高度，當超過這個這個高度時出現(xiàn)垂直滾動條 scrollCollapse： 設置當數(shù)據(jù)占用高度小于 數(shù)據(jù)加載上篇文章中的所有數(shù)據(jù)都是直接渲染的html中的table數(shù)據(jù)，datatables還支持其他幾種數(shù)據(jù)源，以方便實現(xiàn)更靈活的控制 從數(shù)組中獲取<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： 指定數(shù)組 columns： 配置每一列的title 注意：從數(shù)組中獲取數(shù)據(jù)一定要有表頭，如果沒有則可能會報下邊的錯： Uncaught TypeError: Cannot read property 'aDataSort' of undefined 解決方法就是datatables添加 <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"},
]
})
});使用對象數(shù)組，一定要配置columns的 從實例中獲取$(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的方式異步加載數(shù)據(jù)，簡單的方式是直接配置一個url地址即可 $(document).ready(function() {
$('#myTable-x').dataTable({ "ajax": 'sdata.json'
});
});ajax接收的數(shù)據(jù)可以是數(shù)組或者對象，注意
Ajax異步刷新$('#tagTable').DataTable().reload() 直接刷新 $('#tagTable').DataTable().ajax.url() 支持新的url異步刷新 $('#tagTable').DataTable().ajax.url('{:url("index/material/listAll")}?seachClassId='+id).load();表格重載var table = $('#example').DataTable();
table.ajax.reload();或者 $('#example').DataTable().ajax.reload();當前頁面重載//重新加載當前頁，且保持當前頁碼不變$('#'+tableId).DataTable().draw(false);true：重置表格的初始狀態(tài)，回到第一頁，false：只是重新加載當前頁，且保持當前頁碼不變。列數(shù)據(jù)處理上邊的table可以發(fā)現(xiàn)有個site列的內(nèi)容是一個網(wǎng)址，如果我們想讓網(wǎng)址能夠點擊該如何實現(xiàn)呢？可以利用 $(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后邊跟了個函數(shù)，每當數(shù)據(jù)表需要獲取列中某個單元格的數(shù)據(jù)時 data： 單元格的具體數(shù)據(jù)，例如 type： 標識了這一次調用的請求類型，會有 row： 這一行的完整數(shù)據(jù)源，如果像Demo示例傳了對象數(shù)據(jù)，那么可以通過 拿到參數(shù)進行一系列的處理后可以通過 當然也可以通過 "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>'
}
}
]最終呈現(xiàn)結果如下圖
Dom操作如果我不需要datatables顯示左上角的每頁顯示條數(shù)信息，而要換成一個添加按鈕改怎么做呢？這里可以借助datatables的dom來實現(xiàn) 默認情況下表格都會有左上角的每頁顯示條數(shù)、右上角的搜索、左下角的表格信息、右下角的分頁、中間的數(shù)據(jù)加載等待以及表格本身，這些都是datatables的DOM，它們實際上就是一個div包裹起來的select、input之類的html標簽，datatables中的每個DOM都與一個字母相對應，他們的對應關系如下： l： length，代表左上角的每頁顯示條數(shù)控件 f： filtering，代表右上角的搜索控件 t： table，代表表格本身 i： information，代表左下角的表格信息控件 p： pagination，代表右下角的分頁控件 r： processing，代表中間數(shù)據(jù)加載等待提示控件 這些控件在datatables里可以通過配置 $('#myTable-x').dataTable({ "dom": 'lfrtip'})你如果不想顯示某個控件，可以通過去掉
我們想把右上角的每頁顯示條數(shù)控件換成添加按鈕的話可以這樣寫 $('#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>這樣就完美實現(xiàn)了
服務器端處理Datatables支持使用服務端進行數(shù)據(jù)處理，當開啟服務端數(shù)據(jù)處理后，Datatables將在頁面執(zhí)行分頁、排序、搜索等操作時向服務端發(fā)出Ajax請求，Ajax請求會傳遞許多變量給服務端，服務端接收到請求后根據(jù)變量的值對數(shù)據(jù)進行處理，處理完成按照固定的格式返回給前端頁面，頁面對返回的數(shù)據(jù)進行渲染提供給用戶查看 開啟服務器模式只需要兩個設置項 $('#myTable-x').dataTable({ "serverSide": true, "processing": true, "ajax": '/api/site/data'})serverSide： 為true時表示開啟服務端處理模式 processing： 為true時會開啟數(shù)據(jù)處理中的提示，非必須 ajax： 指定服務器端的地址，可以像上邊一樣是個字符串，也可以像jQuery.ajax一樣作為一個對象使用，例如我想傳遞額外的參數(shù)（datatables默認會給后端傳遞許多的參數(shù)，下邊有講）給后端服務器的話，可以這樣用 $('#myTable-x').dataTable({ "serverSide": true, "processing": true, "ajax": { "url": "/api/site/data", "data": function (d) {
d.type = 'ops-coffee';
}
}
})data： 可以在發(fā)送請求給后端時額外增加 發(fā)送到服務器端的參數(shù)當開啟服務端數(shù)據(jù)處理后，默認會給服務端傳遞許多參數(shù)，大概如下： draw：繪制計數(shù)器，主要用來確保Ajax從服務器端接收到的數(shù)據(jù)是對應同一次請求的 start：第一條數(shù)據(jù)的起始位置 length：每頁顯示的條數(shù) 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]：告訴服務器某些列的具體搜索條件 如果需要后臺分頁，那么需要拿到 如果有搜索的內(nèi)容，那么需要拿到 服務端返回數(shù)據(jù)的格式服務端需要返回datatables可以處理的數(shù)據(jù)格式，具體數(shù)據(jù)格式如下： {
"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： 客戶端調用服務端次數(shù)標識，客戶端傳過來是什么原樣返回回去即可，無需修改 recordsTotal： 數(shù)據(jù)總條數(shù)，沒有過濾的數(shù)據(jù)總條數(shù) recordsFiltered： 過濾后符合要求的條數(shù)，如果沒有搜索參數(shù)那么這個值與 data： 需要顯示的具體數(shù)據(jù)，json格式 API調用Datatables提供了強大的API來處理表格上的數(shù)據(jù)，可以通過API添加數(shù)據(jù)到已經(jīng)存在的表格，或者對已經(jīng)存在的數(shù)據(jù)進行操作，API的類型非常豐富，詳細的信息可以查閱官網(wǎng)，使用方法如下： 跳轉到頁跳轉到第3頁： var table = $('#myTable').DataTable()
table.page(2).draw(false)page(2)： page為分頁方法，后邊的2表示跳轉到第幾頁，可以是一個數(shù)字，也可以是 draw(false)： 對表格進行重繪以實現(xiàn)表格更新的顯示，大多數(shù)的api操作都不會直接更新在頁面上，所以需要調用下 搜索某列搜索第2列包含 var tablx = $('#myTable').dataTable()
tablx.api().column(1).search('https://ops-coffee.cn').draw()首先需要注意這個例子中的API調用使用了 重新設置ajax data屬性 var api = $('#tagTable').dataTable().api(); //初始化的ajax data選項
$data = api.settings()[0].ajax.data; //重新設置
$data.type = '12321321'; //重載表格
api.draw();導出https://datatables.net/download 官方下載 導出Excel<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>tableTools</title>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!--datatables 的樣式和導出excel的js-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable({ dom: 'Bfrtip', buttons: [ 'excelHtml5',
]
});
}); </script></head><body><div class="col-md-12 col-sm-12">
<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-list"></i>數(shù)據(jù)列表 </div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<table id="myTable" class="table table-striped table-bordered table-hover"
style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
<tr>
<th>Name111</th>
<th>Position111</th>
<th>Office111</th>
<th>Age111</th>
<th>Start date111</th>
<th>Salary111</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div></div></body></html>運行結果
導出PDFpdf是不支持中文的暫時無解決方案 <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>tableTools</title>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!--datatables 的樣式和導出excel的js-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.js"></script>
<!--PDF-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.21/b-1.6.2/b-html5-1.6.2/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable({ dom: 'Bfrtip', buttons: [ 'excelHtml5', 'pdfHtml5',
]
});
}); </script></head><body><div class="col-md-12 col-sm-12">
<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-list"></i>數(shù)據(jù)列表 </div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<table id="myTable" class="table table-striped table-bordered table-hover"
style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
<tr>
<th>Name111</th>
<th>Position111</th>
<th>Office111</th>
<th>Age111</th>
<th>Start date111</th>
<th>Salary111</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</div></div></body></html>運行效果
導出按鈕的配置例： dom: 'Bfrtip',buttons: [
{ //按鈕 extend: "copy", //按鈕名稱 text: '復制', //按鈕的class名稱
className : 'export-btn'},
{ extend: "excelHtml5", text: '導出excel',
className : 'export-btn'},
{ extend: "copy", text: '導出pdf',
className : 'export-btn'
}, //'copy', 'excelHtml5','pdfHtml5'],所有配置選項 https://datatables.net/reference/option/buttons.buttons
導出設置https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html 參考文章：https://ops-coffee.cn/s/mx2gjLmO7jHKagGsWF6eJw 事件相關http://datatables.club/reference/event/ Datatables對自己所觸發(fā)的事件都有監(jiān)聽，我們可以監(jiān)聽這些動作做相應的處理，比如表格重繪的時候，我需要做一些操作 Datatables的事件監(jiān)聽使用 $('#myTable').on('draw.dt',function() { alert('Table redrawn');
});事件(Events)
該文章在 2023/5/25 15:07:06 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
