博主是一个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( '每次表格重绘时调用' );
}
} );
参考文档