Datatables是一款基于JQuery的一款表格插件,支持服务端分页和客户端分页两种模式。
1、基本使用
我使用的是在AdminLTE中的Datatables插件在使用之前需要引入jQuery.js
、dataTables.bootstrap.min.css
、dataTables.bootstrap.min.js
、jquery.dataTables.min.js
四个文件。引入之后在<script></script>
标签中实例化表格即可。
$("table_elements").dataTable({})
2、一些配置项
"processing" : true,//异步加载时候是否出现提示信息
"serverSide" : true,//是否启用服务端为分页
'paging' : false,//是否开启分页
'destroy' : true,//是否摧毁当前已经实例化的表格
'searching' : false,//是否启用表头上的搜索框
'info' : false,//是否显示表格中的提示信息
3、汉化
Datatables是由外国人开发的一款插件,因此在显示的时候会出现英文的界面。因此我们需要对其进行汉化。
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_条记录",
"sInfoEmtpy": "找不到相关数据",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sProcessing": "正在加载中...",
"sSearch": "搜索本表内容",
"oPaginate": {
"sFirst": "第一页",
"sPrevious":" 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
},
},
服务端分页
4、服务端分页
在进行服务段分页的时候时候通过ajax
请求数据的。返回的数据类型必须是json格式。
ajax: function(data, callback, settings) {
//默认的data是不支持自定义参数的,如果想传入自定义的参数可以这样设置
data= {
'aid' : aid,
'start_date' : start_date,
'end_date' : end_date
};
//封装请求参数
var param = {};
param.aid = data.aid;
param.start_date = data.start_date;
param.end_date = data.end_date;
//ajax请求数据
$.ajax({
type: "POST",
url: "/{{ session.appname }}/town_datas",
cache: false,
data: param,
dataType: "json",
success: function(result) {
//请求成功以后进行数据的封装
var returnData = {};
returnData.data = result.data.town_transaction_report
callback(returnData);
}
});
},