博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquery表格插件,上手很快,重点是超级好用,有完善的中文文档,今天有空,整理一下Datatable的一些使用方法及注意事项,以便随时查阅.
DataTables支持的功能:
1.分页,只需要返回符合规范的数据类型,Datatable能帮我们实现好用的分页,同时支持排序,和即时搜索.
2.丰富的数据源的支持
3,支持国际化,支持多种主题.
快速使用
1.使用Datatables非常简单,只需要引入一个css样式文件和一个js脚本文件,即可,官网提供了文件的cdn地址可直接引用.
CSS: //cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
JS: //cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
2.js中,使用一下简单的几行代码,就能初始化datatables风格的表格样式,并使用Datatable提供的丰富功能.
1 $(document).ready(function(){
2 $(‘#myTable‘).DataTable();
3 });
html页面中的table标签定义一个id,比如id="myTable".
丰富配置项
以上就可以实现基本风格的datatables样式,datatables默认情况下已启用一些功能,比如搜索,排序,分页,要想更加自由的控制样式,我们需要更详细的配置.
DOM定位
dom定位可以实现你自由的布局 分页,搜索框等等这些组件,以下是一些组件以及字符缩写.
- l - Length changing 每页显示多少条数据选项
- f - Filtering input 搜索框
- t - The Table 表格
- i - Information 表格信息
- p - Pagination 分页按钮
- r - pRocessing 加载等待显示信息
如果我们使用下面的代码来控制样式,表示 i显示在top(顶部),flp显示在bottom(底部).这样就可以自定义组件位置了.
$(‘#example‘).dataTable( {
"dom": ‘<"top"i>rt<"bottom"flp><"clear">‘
} );
国际化配置
datatables使用的语言选项可以通过language来配置,语言配置作为初始化配置的一部分,可以通过一下配置来自定义页面各个地方的显示文本.
$(‘#example‘).DataTable({
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
限制水平宽度/垂直高度
如果需要在一个定宽或者定高的table里展示数据,为了能够展示所有的数据,就要限制宽度,或高度,使用垂直或水平滚动条,在Datatable中使用如下配置:
$(document).ready(function() {
$(‘#example‘).dataTable( {
//开启水平滚动条
"scrollX": true
//设置固定高度为200px 数据量溢出时出现滚动条
"scrollY": "200px",
"scrollCollapse": "true",
//不启用分页(展示所有)
"paging": "false"
} );
} );
其他配置功能:
$(document).ready(function() {
$(‘#example‘).dataTable( {
//禁用分页
"paging": false,
//禁用排序
"ordering": false,
//禁用本地搜索
"searching":false,
//开启选择每页显示多少记录的下拉框 如果pageing配置为false,此配置会自动置为false
"lengthChange":true,
//是否显示正在处理的状态。开启后在数据加载过程中,会有正在加载状态
"processing": "true"
//是否显示正在处理的状态。开启后在数据加载过程中,会有正在加载状态,在处理耗时数据时比较有用
"processing": "true"
//开启延迟渲染,假设加载1000条数到表格.每页显示10条,开启后datatables只会创建10个节点,即根据分页的生命周期来创建行
"deferRender": true
//禁用自动列宽的计算,如果以自定义列宽,建议禁用,因为此操作会耗费一些额外时间计算列宽
"autoWidth": false,
//禁用状态保存 开启后再次加载页面表格状态会被设成之前的状态
"stateSave" : false,
} );
} );
数据源
这里主要讲解ajax获取对象数据
$(document).ready(function() {
$(‘#example‘).DataTable( {
//ajax可以接收string,object,fucntion
"ajax": {
//type url 不需多说
"type": "POST",
"url":$(‘#game_detail_data‘).attr("data-url"),
//从服务器获得json数据,使用dataSrc属性把data改为aodata
"dataSrc": "aoData",
//请求参数,添加额外的参数发送到服务器 接受一个fucntion
"data":function(d){
d.pageType=‘DETAIL‘;
d.channelName=$("#channelname").val().trim();
d.tag=$("#tag").val();
d.startTime=$("#startTime").val();
d.endTime=$("#endTime").val();
}
},
//返回数据是对象列表的时候需要使用如下方式与列名一一对应好
"columns": [
{ "data": "name" },
{ "data": "age" },
{ "data": "sex",
//渲染数据显示在表格中,render可以让你在table显示非常多样化的格式
"render" : function(data, type, full, meta) {
if(data==‘boy‘){
data ="男";
}else{
data ="女";
}
return data;
}},
},
{ "data": "phone" },
{ "data": "address" },
{ "data": "salary" }
]
} );
} );
回调函数
datatable支持在数据初始化的各个时机进行一些自定义操作,下面说两个比较常用的:
$(‘#example‘).dataTable( {
//数据初始化表格绘制成功后调用此函数
"initComplete": function() {
alert( ‘初始化以后调用‘ );
}
//每次表格重绘的时候都调用这个函数
"drawCallback": function( settings ) {
alert( ‘每次表格重绘时调用‘ );
}
} );
参考文档