datatables是一款基于JQuery的插件用來(lái)優(yōu)化table，支持表格分頁(yè)、搜索、排序、顯示條數(shù)、異步加載等功能
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
datatables是一款基于JQuery的表格插件，主要用來(lái)優(yōu)化table，支持表格分頁(yè)、搜索、排序、顯示條數(shù)、異步加載等眾多好用的功能 項(xiàng)目地址：https://datatables.net/ 基本使用需要用到的JS和CSS文件位于項(xiàng)目代碼下的media目錄中，需要將這個(gè)目錄中的對(duì)應(yīng)文件放入你的項(xiàng)目里，這一步不贅述
<!-- 加載 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();
});
功能開啟/關(guān)閉默認(rèn)界面下除了原始的table外，還為table額外增加了搜索、列排序、分頁(yè)及信息顯示這些內(nèi)容，如果不需要其中一個(gè)或多個(gè)可以通過(guò)以下設(shè)置隱藏 $('#myTable').DataTable({ "paging": false, "ordering": false, "info": false, "searching": false,
});paging： 控制分頁(yè)是否開啟，默認(rèn)開啟，開啟后會(huì)顯示表格左上角的每頁(yè)行數(shù)選擇和右下角的頁(yè)碼跳轉(zhuǎn) ordering： 控制是否進(jìn)行排序，默認(rèn)開啟，且默認(rèn)會(huì)對(duì)第一列數(shù)據(jù)進(jìn)行排序 info： 控制是否顯示表格左下角的信息，默認(rèn)開啟 searching： 控制是否顯示表格右上角的搜索，默認(rèn)開啟 排序配置單列排序可以通過(guò) "order": [[ 3, "desc" ]], 列號(hào)默認(rèn)從0開始算起，這里的3實(shí)際上對(duì)應(yīng)的是第4列，這點(diǎn)要注意，以下所有用到列號(hào)的地方都是從0開始 注意：開啟 多列排序當(dāng)然也可以在order里邊配置同時(shí)按多列排序 "order": [[ 3, "desc" ], [ 0, "desc" ]], 如上配置的意思是先按照3列進(jìn)行排序，如果3列相同，則再按照0列進(jìn)行排序 搜索框提示設(shè)置"fnPreDrawCallback": function( oSettings ) {
$('.dataTables_filter input').attr({'name':'search','placeholder': '按名稱搜索'});//提示},屏蔽錯(cuò)誤提示和自定義錯(cuò)誤提示官方參考：https://datatables.net/reference/event/error //初始化之前設(shè)置$.fn.dataTable.ext.errMode = 'none'; //屏蔽掉報(bào)錯(cuò)彈窗
$('#Table')//初始化的datatables
.on( 'error.dt', function ( e, settings, techNote, message ) { //接收并打印錯(cuò)誤信息，也可自行添加相應(yīng)處理方法
console.log( 'An error has been reported by DataTables: ', message );
} ).DataTable({ //其他配置
});隱藏列可以通過(guò) "columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false,
}]targets： 指定列 visible： 是否可顯示 searchable： 是否可搜索，當(dāng)僅設(shè)置 注意：開啟 動(dòng)態(tài)隱藏列/**
* #tagTable 表格id
* column(5) 第6列
* visible(false) true 顯示 false不顯示
*/$('#tagTable').DataTable().column(5).visible(false);語(yǔ)言配置默認(rèn)提示語(yǔ)都是英文，可以通過(guò) "language": {
"decimal": "", "emptyTable": "表中數(shù)據(jù)為空", "info": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)", "infoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)", "infoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過(guò)濾)", "InfoPostFix": "", "thousands": ",", "lengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果", "loadingRecords": "載入中...", "processing": "處理中...", "search": "搜索:", "zeroRecords": "沒(méi)有匹配結(jié)果", "Paginate": {
"sFirst": "首頁(yè)", "sPrevious": "上一頁(yè)", "sNext": "下一頁(yè)", "sLast": "尾頁(yè)"
},
"Aria": {
"sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列"
}
}狀態(tài)保持可以通過(guò) "stateSave": true, 分頁(yè)類型可以通過(guò) "pagingType": "simple_numbers", simple_numbers： 類型會(huì)顯示上一頁(yè)、下一頁(yè)按鈕和頁(yè)碼，這也是默認(rèn)的分頁(yè)類型 其他幾種分頁(yè)類型如下： numbers： 僅顯示頁(yè)碼 simple： 僅顯示上一頁(yè)、下一頁(yè)按鈕 full： 僅顯示首頁(yè)、尾頁(yè)、上一頁(yè)和下一頁(yè)按鈕 full_numbers： 顯示首頁(yè)、尾頁(yè)、上一頁(yè)、下一頁(yè)按鈕和頁(yè)碼 first_last_numbers： 顯示首頁(yè)、尾頁(yè)按鈕和頁(yè)碼 滾動(dòng)配置當(dāng)table的寬、高超過(guò)頁(yè)面設(shè)置大小時(shí)，可以通過(guò)以下配置來(lái)添加滾動(dòng)條 "scrollX": "true","scrollY": "200px","scrollCollapse": true, scrollX： 允許水平滾動(dòng)條 scrollY： 設(shè)置垂直body的高度，當(dāng)超過(guò)這個(gè)這個(gè)高度時(shí)出現(xiàn)垂直滾動(dòng)條 scrollCollapse： 設(shè)置當(dāng)數(shù)據(jù)占用高度小于 數(shù)據(jù)加載上篇文章中的所有數(shù)據(jù)都是直接渲染的html中的table數(shù)據(jù)，datatables還支持其他幾種數(shù)據(jù)源，以方便實(shí)現(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ù)一定要有表頭，如果沒(méi)有則可能會(huì)報(bào)下邊的錯(cuò)： 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> 從對(duì)象中獲取<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"},
]
})
});使用對(duì)象數(shù)組，一定要配置columns的 從實(shí)例中獲取$(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ù)，簡(jiǎn)單的方式是直接配置一個(gè)url地址即可 $(document).ready(function() {
$('#myTable-x').dataTable({ "ajax": 'sdata.json'
});
});ajax接收的數(shù)據(jù)可以是數(shù)組或者對(duì)象，注意
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();當(dāng)前頁(yè)面重載//重新加載當(dāng)前頁(yè)，且保持當(dāng)前頁(yè)碼不變$('#'+tableId).DataTable().draw(false);true：重置表格的初始狀態(tài)，回到第一頁(yè)，false：只是重新加載當(dāng)前頁(yè)，且保持當(dāng)前頁(yè)碼不變。列數(shù)據(jù)處理上邊的table可以發(fā)現(xiàn)有個(gè)site列的內(nèi)容是一個(gè)網(wǎng)址，如果我們想讓網(wǎng)址能夠點(diǎn)擊該如何實(shí)現(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后邊跟了個(gè)函數(shù)，每當(dāng)數(shù)據(jù)表需要獲取列中某個(gè)單元格的數(shù)據(jù)時(shí) data： 單元格的具體數(shù)據(jù)，例如 type： 標(biāo)識(shí)了這一次調(diào)用的請(qǐng)求類型，會(huì)有 row： 這一行的完整數(shù)據(jù)源，如果像Demo示例傳了對(duì)象數(shù)據(jù)，那么可以通過(guò) 拿到參數(shù)進(jìn)行一系列的處理后可以通過(guò) 當(dāng)然也可以通過(guò) "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)結(jié)果如下圖
Dom操作如果我不需要datatables顯示左上角的每頁(yè)顯示條數(shù)信息，而要換成一個(gè)添加按鈕改怎么做呢？這里可以借助datatables的dom來(lái)實(shí)現(xiàn) 默認(rèn)情況下表格都會(huì)有左上角的每頁(yè)顯示條數(shù)、右上角的搜索、左下角的表格信息、右下角的分頁(yè)、中間的數(shù)據(jù)加載等待以及表格本身，這些都是datatables的DOM，它們實(shí)際上就是一個(gè)div包裹起來(lái)的select、input之類的html標(biāo)簽，datatables中的每個(gè)DOM都與一個(gè)字母相對(duì)應(yīng)，他們的對(duì)應(yīng)關(guān)系如下： l： length，代表左上角的每頁(yè)顯示條數(shù)控件 f： filtering，代表右上角的搜索控件 t： table，代表表格本身 i： information，代表左下角的表格信息控件 p： pagination，代表右下角的分頁(yè)控件 r： processing，代表中間數(shù)據(jù)加載等待提示控件 這些控件在datatables里可以通過(guò)配置 $('#myTable-x').dataTable({ "dom": 'lfrtip'})你如果不想顯示某個(gè)控件，可以通過(guò)去掉
我們想把右上角的每頁(yè)顯示條數(shù)控件換成添加按鈕的話可以這樣寫 $('#myTable-x').dataTable({ "dom": '<"#add-btn.toolbar">frtip'})
$("#add-btn.toolbar").html( '<button href="#add" class="btn btn-success btn-sm"> + 添加</button>')遇到樣式問(wèn)題，需要添加css <style type="text/css">
.toolbar {float:left}</style>這樣就完美實(shí)現(xiàn)了
服務(wù)器端處理Datatables支持使用服務(wù)端進(jìn)行數(shù)據(jù)處理，當(dāng)開啟服務(wù)端數(shù)據(jù)處理后，Datatables將在頁(yè)面執(zhí)行分頁(yè)、排序、搜索等操作時(shí)向服務(wù)端發(fā)出Ajax請(qǐng)求，Ajax請(qǐng)求會(huì)傳遞許多變量給服務(wù)端，服務(wù)端接收到請(qǐng)求后根據(jù)變量的值對(duì)數(shù)據(jù)進(jìn)行處理，處理完成按照固定的格式返回給前端頁(yè)面，頁(yè)面對(duì)返回的數(shù)據(jù)進(jìn)行渲染提供給用戶查看 開啟服務(wù)器模式只需要兩個(gè)設(shè)置項(xiàng) $('#myTable-x').dataTable({ "serverSide": true, "processing": true, "ajax": '/api/site/data'})serverSide： 為true時(shí)表示開啟服務(wù)端處理模式 processing： 為true時(shí)會(huì)開啟數(shù)據(jù)處理中的提示，非必須 ajax： 指定服務(wù)器端的地址，可以像上邊一樣是個(gè)字符串，也可以像jQuery.ajax一樣作為一個(gè)對(duì)象使用，例如我想傳遞額外的參數(shù)（datatables默認(rèn)會(huì)給后端傳遞許多的參數(shù)，下邊有講）給后端服務(wù)器的話，可以這樣用 $('#myTable-x').dataTable({ "serverSide": true, "processing": true, "ajax": { "url": "/api/site/data", "data": function (d) {
d.type = 'ops-coffee';
}
}
})data： 可以在發(fā)送請(qǐng)求給后端時(shí)額外增加 發(fā)送到服務(wù)器端的參數(shù)當(dāng)開啟服務(wù)端數(shù)據(jù)處理后，默認(rèn)會(huì)給服務(wù)端傳遞許多參數(shù)，大概如下： draw：繪制計(jì)數(shù)器，主要用來(lái)確保Ajax從服務(wù)器端接收到的數(shù)據(jù)是對(duì)應(yīng)同一次請(qǐng)求的 start：第一條數(shù)據(jù)的起始位置 length：每頁(yè)顯示的條數(shù) search[value]：全局的檢索關(guān)鍵字order[i][column]：告訴服務(wù)器哪些列是需要排序的，i為排序列的序號(hào)，下邊的i相同含義，注意i是從0開始的order[i][dir]：告訴服務(wù)器排序的方式"desc","asc"columns[i][data]：columns上定義的data屬性值columns[i][name]：columns上定義的name屬性值columns[i][searchable]：告訴服務(wù)器哪些列可以被搜索columns[i][orderable]：告訴服務(wù)器哪些列可以進(jìn)行排序columns[i][search][value]：告訴服務(wù)器某些列的具體搜索條件 如果需要后臺(tái)分頁(yè)，那么需要拿到 如果有搜索的內(nèi)容，那么需要拿到 服務(wù)端返回?cái)?shù)據(jù)的格式服務(wù)端需要返回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"
}
// 省略其他結(jié)果
]}draw： 客戶端調(diào)用服務(wù)端次數(shù)標(biāo)識(shí)，客戶端傳過(guò)來(lái)是什么原樣返回回去即可，無(wú)需修改 recordsTotal： 數(shù)據(jù)總條數(shù)，沒(méi)有過(guò)濾的數(shù)據(jù)總條數(shù) recordsFiltered： 過(guò)濾后符合要求的條數(shù)，如果沒(méi)有搜索參數(shù)那么這個(gè)值與 data： 需要顯示的具體數(shù)據(jù)，json格式 API調(diào)用Datatables提供了強(qiáng)大的API來(lái)處理表格上的數(shù)據(jù)，可以通過(guò)API添加數(shù)據(jù)到已經(jīng)存在的表格，或者對(duì)已經(jīng)存在的數(shù)據(jù)進(jìn)行操作，API的類型非常豐富，詳細(xì)的信息可以查閱官網(wǎng)，使用方法如下： 跳轉(zhuǎn)到頁(yè)跳轉(zhuǎn)到第3頁(yè)： var table = $('#myTable').DataTable()
table.page(2).draw(false)page(2)： page為分頁(yè)方法，后邊的2表示跳轉(zhuǎn)到第幾頁(yè)，可以是一個(gè)數(shù)字，也可以是 draw(false)： 對(duì)表格進(jìn)行重繪以實(shí)現(xiàn)表格更新的顯示，大多數(shù)的api操作都不會(huì)直接更新在頁(yè)面上，所以需要調(diào)用下 搜索某列搜索第2列包含 var tablx = $('#myTable').dataTable()
tablx.api().column(1).search('https://ops-coffee.cn').draw()首先需要注意這個(gè)例子中的API調(diào)用使用了 重新設(shè)置ajax data屬性 var api = $('#tagTable').dataTable().api(); //初始化的ajax data選項(xiàng)
$data = api.settings()[0].ajax.data; //重新設(shè)置
$data.type = '12321321'; //重載表格
api.draw();導(dǎo)出https://datatables.net/download 官方下載 導(dǎo)出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 的樣式和導(dǎo)出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>運(yùn)行結(jié)果
導(dǎo)出PDFpdf是不支持中文的暫時(shí)無(wú)解決方案 <!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 的樣式和導(dǎo)出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>運(yùn)行效果
導(dǎo)出按鈕的配置例： dom: 'Bfrtip',buttons: [
{ //按鈕 extend: "copy", //按鈕名稱 text: '復(fù)制', //按鈕的class名稱
className : 'export-btn'},
{ extend: "excelHtml5", text: '導(dǎo)出excel',
className : 'export-btn'},
{ extend: "copy", text: '導(dǎo)出pdf',
className : 'export-btn'
}, //'copy', 'excelHtml5','pdfHtml5'],所有配置選項(xiàng) https://datatables.net/reference/option/buttons.buttons
導(dǎo)出設(shè)置https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html 參考文章：https://ops-coffee.cn/s/mx2gjLmO7jHKagGsWF6eJw 事件相關(guān)http://datatables.club/reference/event/ Datatables對(duì)自己所觸發(fā)的事件都有監(jiān)聽，我們可以監(jiān)聽這些動(dòng)作做相應(yīng)的處理，比如表格重繪的時(shí)候，我需要做一些操作 Datatables的事件監(jiān)聽使用 $('#myTable').on('draw.dt',function() { alert('Table redrawn');
});事件(Events)
該文章在 2023/5/25 15:07:06 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
