datatables使⽤教程
⽂章⽬录
bootstrap-datatables使⽤教程
介绍
Datatables是⼀款jquery表格插件。它是⼀个⾼度灵活的⼯具，可以将任何HTML表格添加⾼级的交互功能。
分页，即时搜索和排序
⼏乎⽀持任何数据源：DOM， javascript， Ajax 和 服务器处理
⽀持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强⼤的API
⽀持国际化
超过2900+个单元测试
免费开源 （ ）！
更多特性请到官⽹查看
安装配置
本⽂代码仓库：
步骤
引⼊⽂件 css,jq,datatables
拿到table对象，执⾏初始化
⽰例代码
<!--第⼀步：引⼊Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet"type="text/css"href="cdn.datatables/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript"charset="utf8"src="code.jquery/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript"charset="utf8"src="cdn.datatables/1.10.15/js/jquery.dataTables.js"></script>
<!--或者下载到本地，下⾯有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet"type="text/css"href="DataTables-1.10.15/media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript"charset="utf8"src="DataTables-1.10.15/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript"charset="utf8"src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
<!--第⼆步：添加如下 HTML 代码-->
<table id="table_id_example"class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<!--第三步：初始化Datatables-->
$(document).ready( function () {
$('#table_id_example').DataTable();
} );
原理介绍
对table进⾏渲染，前提table的数据源得有，如上⾯的是HTML页⾯本来就有⼀定的数据了，所以可以直接调⽤函数进⾏渲染；
但是在⼤多数情况下，项⽬开发并不会采⽤这种做法，⽽是要结合服务端，采⽤ajax⽅式获取数据源。
做法有很多，可以ajax异步拿到数据后，进⾏dom操作，把数据填⼊table中，在进⾏load() 这样当然可以，但是代码很乱，难看。
然⽽datatables⽀持我们开启服务端模式，通过配置⼀些选项即可做到。那么下⾯开始我们开发中⽐较好的⽤法。当然，你也可以通过⾃⼰去。
上⾯的只是最简单的⼊门，还有更多⾃定义参数，⾃定义选型。
下⾯我们来看⼀下，在开发中最常⽤的⼀些⽤法。
简单使⽤
步骤
前端准备好静态的表格数据
引⼊datatables
在js中调⽤函数渲染
⽰例代码
前端准备好静态的表格数据
<html>
<#include "common/head.ftl">
<body>
<table id="t1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>⽣⽇</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="/js/index.js"></script>
引⼊datatables
我是在head.ftl 中公共部分引⼊的。并且是使⽤maven去管理webjars，具体代码请clone 我的GitHub上的代码查看，每⼀步都是有commit tag 可以查看的。
<head>
<link rel="stylesheet"href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet"type="text/css"
href="/webjars/datatables/1.10.16/css/jquery.dataTables.css">
<script src="/webjars/jquery/1.12.3/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript"charset="utf8"
src="/webjars/datatables/1.10.16/js/jquery.dataTables.js"></script>
<#--设置request变量-->
<script>
var ctx ="${tPath}";
</script>
</head>
在js中调⽤函数渲染
$("#t1").dataTable({});
效果截图
可以看到，这些默认都是英⽂的，那怎么办呢？其实我们可以⾃⼰定制这个语⾔选项。
设置language 选项
下⾯给出详细点的解释，这些是通常能⽤到的。但是很多时候，项⽬开发是不需要这么多的。
关键代码
对应仓库的datatables使⽤教程 分⽀的 language选项详解
$("#t1").dataTable({
language:{
"decimal":"",//⼩数的⼩数位符号⽐如“，”作为数字的⼩数位符号
"emptyTable":"没有数据哟~~",//没有数据时要显⽰的字符串
"info":"当前 _START_ 条到 _END_ 条共 _TOTAL_ 条",//左下⾓的信息，变量可以⾃定义，到官⽹详细查看"infoEmpty":"⽆记录",//当没有数据时，左下⾓的信息
"infoFiltered":"(从 _MAX_ 条记录过滤)",//当表格过滤的时候，将此字符串附加到主要信息"infoPostFix":"",//在摘要信息后继续追加的字符串
"thousands":",",//千分位分隔符
"lengthMenu":"每页 _MENU_ 条记录",//⽤来描述分页长度选项的字符串"loadingRecords":"加载中...",//⽤来描述数据在加载中等待的提⽰字符串 - 当异步读取数据的时候显⽰"processing":"处理中...",//⽤来描述加载进度的字符串
"search":"搜索",//⽤来描述搜索输⼊框的字符串
"zeroRecords":"没有到",//当没有搜索到结果时，显⽰
"paginate":{
"first":"⾸页",
"previous":"上⼀页",
"next":"下⼀页",
"last":"尾页"
}
}
});
效果截图
可以看到，datatables是提供接⼝让我们⾃定义的，当然，相对应的官⽹也会提供接⼝⽂档。具体可以看
设置开发常⽤选项
那么我们开发也只是⽤到其中的⼀些。⽐较常⽤的，适应⼤部分普通后台管理的需求。
⽰例代码
具体查看代码仓库：datatables使⽤教程分⽀的 常⽤选项
index.js
$("#t1").dataTable({
language:{
"decimal":"",//⼩数的⼩数位符号⽐如“，”作为数字的⼩数位符号
"emptyTable":"没有数据哟~~",//没有数据时要显⽰的字符串
"info":"当前 _START_ 条到 _END_ 条共 _TOTAL_ 条",//左下⾓的信息，变量可以⾃定义，到官⽹详细查看"infoEmpty":"⽆记录",//当没有数据时，左下⾓的信息
"infoFiltered":"(从 _MAX_ 条记录过滤)",//当表格过滤的时候，将此字符串附加到主要信息"infoPostFix":"",//在摘要信息后继续追加的字符串
"thousands":",",//千分位分隔符
"lengthMenu":"每页 _MENU_ 条记录",//⽤来描述分页长度选项的字符串
"loadingRecords":"加载中...",//⽤来描述数据在加载中等待的提⽰字符串 - 当异步读取数据的时候显⽰"
jquery在线教程交流processing":"处理中...",//⽤来描述加载进度的字符串
"search":"搜索",//⽤来描述搜索输⼊框的字符串
"zeroRecords":"没有到",//当没有搜索到结果时，显⽰
"paginate":{
"first":"⾸页",
"previous":"上⼀页",
"next":"下⼀页",
"last":"尾页"
}
},
processing:true,//是否显⽰处理状态(排序的时候，数据很多耗费时间长的话，也会显⽰这个)
lengthChange:true,//是否允许⽤户改变表格每页显⽰的记录数
orderMulti:true,//启⽤多列排序
ordering:true,//使⽤排序
bStateSave:true,//记录cookie
paging:true,//是否分页
pagingType:"full_numbers",//除⾸页、上⼀页、下⼀页、末页四个按钮还有页数按钮
searching:false,//是否开始本地搜索
stateSave:false,//刷新时是否保存状态
autoWidth:true,//⾃动计算宽度
deferRender:true,//延迟渲染
});
扯了那么多，只是定义⼀个⼤概雏形，接下来才是重头戏
ajax异步带参数获取数据源，结合Java服务端模式
服务端采⽤springboot 的 ssm框架 + freemarkder视图（新⼿提⽰：类似jsp的东东）+pagehelper分页步骤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。