本文用于自己记录,忘记时可以用来回顾。点击这里进入JQuerydatatable官网API地址
JQuery Datatables初始化
个人比较喜欢JQueryDatatables的Bootstrap4风格,所以文章以Bootstrap4风格为例。
JQueryDatatable的初始化很简单,按照官网的举例说明,只要如下几个JS和CSS文件即可:
1、jquery-3.3.1.min.js,当然高版本的JS也是可以的
2、jquery.dataTables.min.js
3、dataTables.bootstrap4.min.js
4、bootstrap.min.css
5、dataTables.bootstrap4.min.css
注意:JS文件的引用顺序很重要,JQuery必须放在第一位,然后dataTables.min.js是第二位,JQuery不能重复引用
既然使用了bootstrap.min.css,那我加入了bootstrap.min.js了,就用Bootstrap框架。忽略文件路径,代码如下图所示:
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/datatables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/datatables/dataTables.bootstrap4.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
再加入官网复制来的HTML代码(因为太长,所以这里只列举了一部分),如下图所示:
<table id="example" class="table table-striped table-bordered" style="white-space: nowrap;width:100%;cursor:pointer" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
.............
</tbody>
</table>
再加入一段基本的JS代码,如下图所示:
<script type="text/javascript">
var dtsLanguage = "/Scripts/datatables/datatables_zh-cn.txt"
var mytable;
$(document).ready(function () {
mytable = $('#example').DataTable({
pagingType: "full_numbers",
language: {
url: dtsLanguage
}
});
mytable.on('order.dt search.dt', function () {
mytable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
</script>
变量dtsLanguage存放了一个配置文件地址,配置文件用于更换默认英文的语言配置为中文配置,配置文件的内容如下:
{
"buttons": {
"pageLength": "显示 %d 行",
"excel":"<i class='fa fa-file-excel-o'></i> 导出Excel"
},
"decimal": "",
"emptyTable": "表中数据为空",
"info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果,共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"InfoPostFix": "