插件介绍: DataTables 表格分页

官网：
英文：https://datatables.net/
中文：http://www.datatables.club/

引入文件(结合bootstrap样式)：

        css:<link href="statics/css/dataTable/dataTables.bootstrap.min.css" type="text/css" rel="stylesheet">js:<script src="statics/js/dataTable/jquery.dataTables.min.js" type="text/javascript"></script><script src="statics/js/dataTable/dataTables.bootstrap.min.js" type="text/javascript"></script>

用法：
HTML(以本人项目为例):

<table class="table table-bordered table-hover table-striped" id="dutyListTable"><thead><tr><th>选择</th><th>实际值班人</th><th>值班日期</th><th>班次类别</th></tr></thead><tbody id="rewardBody"></tbody></table>

JS（相关配置项）:

  var dutyTable =  $("#dutyListTable").dataTable({"destroy" : true,       //销毁表格对象"aLengthMenu":[5,10],  //用户可自选每页展示数量 5条或10条"searching":false,//禁用搜索（搜索框）"lengthChange":true,"paging": true,//开启表格分页"bProcessing" : true,"bServerSide" : true,"bAutoWidth" : false,
//                  "sort" : "position","deferRender":true,//延迟渲染
//                  "bStateSave" : false, //在第三页刷新页面，会自动到第一页
//         "retrieve" : true,       //类似单例模式，重复利用以存在对象。"iDisplayLength" : 5,"iDisplayStart" : 0,"select": {style:    'os',selector: 'td:first-child'},"ordering": false,//全局禁用排序"ajax": {  //ajax方式向后台发送请求"type": "POST","url":"mvc/onDuty/find-user-duty","data":{dutyUserId:uid},//传递的数据"dataType" : "json"},"columns" : [//对接收到的json格式数据进行处理，data为json中对应的key{"data":"id"},{"data" : "actualDutyUser.realName"} ,{"data" : "onDutyDate"},{"data": "categoryKey.typeName.keyValue"},],//渲染"columnDefs": [{"render": function ( data, type, row ) {return "<input type='radio' name='onDutyToId'  value='" + data + "'>";},"targets": 0 //指定渲染列：第一列(渲染第一列为单选框，data自动匹配为  {"data":"id"}中数据）},],"oLanguage" : { // 国际化配置"sProcessing" : "正在获取数据，请稍后...","sLengthMenu" : "显示 _MENU_ 条","sZeroRecords" : "没有找到数据","sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条","sInfoEmpty" : "记录数为0","sInfoFiltered" : "(全部记录数 _MAX_ 条)","sInfoPostFix" : "","sSearch" : "查询","sUrl" : "","oPaginate" : {"sFirst" : "第一页","sPrevious" : "上一页","sNext" : "下一页","sLast" : "最后一页"}},
//                  initComplete:initComplete,});// dutyTable.fnDraw();//重绘

后台控制层：

 /*** @(dataTable格式)* @param:[onDuty, sEcho, start：开始索引数, length：每页显示数量]* @return:java.util.Map<java.lang.String,java.lang.Object>*/@RequestMapping(value="find-user-duty",method=RequestMethod.POST)@ResponseBodypublic Map<String,Object> getClassesTeacher(AlertOnDuty onDuty,@RequestParam(value = "sEcho",required = false)Integer sEcho, @RequestParam("start")Integer start,@RequestParam("length")Integer length) {this.map = new HashMap<String, Object>();//获取分页控件的信息this.pageBean = this.getBaseAllService().getOnDutyService().getManOnDutyList(onDuty,start,length);map.put("aaData", pageBean.getResult());//页数信息配置map.put("sEcho", sEcho);map.put("iTotalRecords", pageBean.getTotalRow());map.put("iTotalDisplayRecords",pageBean.getTotalRow());return map;}

其中：start：开始索引数, length：每页显示数量。sEcho记不清了，可有可无。
start和length都是向后台发送请求时自带的参数。
aaData为dataTable接收数据的变量名称，是dataTable默认的。

效果：

本文只是从实际项目入手讲解，不够系统全面，如想更好使用DataTables建议参考官方文档。

插件介绍: DataTables 表格分页相关推荐

Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能一.部分技术选型二.项目结构三.功能需求和效果展示四.关键代码 4.1页 ...
Datatables表格插件学习
Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,可以很方便的实现分页,即时搜索和排序. 一.简单使用怎样简单地使用DataTabl ...
datatables html定义,DataTables表格插件使用说明
DataTables简介与EasyUI的Datagrid作用一样,比easyui更漂亮 Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功 ...
聊聊前段插件之Datatables
在web开发过程中表格数据展示是一个很常见的功能,而且用户对其要求也比较高,性能.易用性等.今天我推荐一款利器给大家--Datatables:Datatables中文网. 一.介绍 Datatable ...
Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页前言最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
Notion 的插件介绍和使用
十分推荐 Save to Notion Notion Web Clipper notion 官方的剪藏插件插件安装 Chrome 商店 :https://chrome.google.com/webs ...
原生js实现动态表格分页(封装版)
之前一直用的插件做表格分页,但是不同的场景用到的情况都不同,所以索性用个原生js搞一个封装好的. 后台动态获取数据进行渲染,等页面渲染成功之后在进行分页.数据的获取我用的vue,也可以用ajax等其他 ...
表格 + 分页 +表格上编辑
分装分页表格分页表格的封装代码截图实现的功能分页咋弄的 dataPacket是啥看下图表格编辑咋搞的我其实啥都不想写..图片贴上就完了↑↑↑ 你这个东西咋用呀效果展示一下吧---好的分 ...
html打印表格自动分页,Web分页打印细线表格+分页打印之终极攻略
Web分页打印细线表格+分页打印之终极攻略发布时间:2009-03-01 23:46:40 作者:佚名我要评论最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面 ...

插件介绍: DataTables 表格分页

插件介绍: DataTables 表格分页相关推荐

最新文章

热门文章