datatable分页指南--前台分页和后台分页

2024-04-15 18:58

本文主要是介绍datatable分页指南--前台分页和后台分页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、介绍

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

  • 分页,即时搜索和排序
  • 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
  • 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
  • 各式各样的扩展: Editor, TableTools, FixedColumns ……
  • 丰富多样的option和强大的API
  • 支持国际化
  • 超过2900+个单元测试
二、引入

<link rel="stylesheet" type="text/css" href="/DataTables-1.10.7/css/jquery.dataTables.css"><!-- jQuery -->
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.0/js/jquery.js"></script><!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.7/js/jquery.dataTables.js"></script>

三、html

 <table class="table table-bordered table-hover" id="bigDataList"><thead><tr><th>用户id</th><th>主叫</th><th>识别码</th><th>区域id</th><th>服务类型</th><th>服务组</th><th>位置区码</th><th>GPRS节点</th><th>分配记数</th><th>协议类型</th><th>开始时间</th><th>结束时间</th></tr></thead><tbody></tbody></table>

四、js代码

 var table1;//dataTable初始化对象function bigDataTable(queryData){table1= $('#bigDataList').DataTable({"paging": true,"lengthChange": true,"searching": true,"ordering": true,"aaSorting" : [[0, "asc"]], //默认的排序方式,第1列,升序排列"info": true,"autoWidth": false,"destroy":true,"processing":true,"scrollX": true,   //水平新增滚动轴
//          "serverSide":true,    //true代表后台处理分页,false代表前台处理分页"aLengthMenu":[10,15,20],"PaginationType" : "full_numbers", //详细分页组,可以支持直接跳转到某页//当处理大数据时,延迟渲染数据,有效提高Datatables处理能力"deferRender": true,"ajax":{url:"getJson_BigData_queryDataByParams",dataSrc:function(data){if(data.callbackCount==null){data.callbackCount=0;}//抛出异常if(data.sqlException){alert(data.sqlException);}//查询结束取消按钮不可用$("#queryDataByParams").removeAttr("disabled");return data.dataList;             //自定义数据源,默认为data},     //dataSrc相当于success,在datatable里面不能用success方法,会覆盖datatable内部回调方法type:"post",data:queryData},columns:[{ data: 'user_ip' },{ data: 'calling'},{ data: 'imei' },{ data: 'cell_id'},{ data: 'service_type' },{ data: 'service_group'},{ data: 'lac' },{ data: 'sgsn'},{ data: 'assignment_count' },{ data: 'proto_type'},{ data: 'start_time' },{ data: 'end_time'},],/*是否开启主题*/"bJQueryUI": true,"oLanguage": {    // 语言设置"sLengthMenu": "每页显示 _MENU_ 条记录","sZeroRecords": "抱歉, 没有找到","sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据","sInfoEmpty": "没有数据","sInfoFiltered": "(从 _MAX_ 条数据中检索)","sZeroRecords": "没有检索到数据","sSearch": "检索:","oPaginate": {"sFirst": "首页","sPrevious": "前一页","sNext": "后一页","sLast": "尾页"}},});}

点击请求ajax,返回渲染数据:

 //点击查询$("#queryDataByParams").on("click",function() {var reg = new RegExp("^[0-9]*$");var startTime=$("#searchDateRange").val().substring(0,19).replace(/-/g, '/');var endTime=$("#searchDateRange").val().substring(22,41).replace(/-/g, '/');var date1=new Date(startTime);  //开始时间var date2=new Date(endTime);    //结束时间var date3=date2.getTime()-date1.getTime()  //时间差的毫秒数if(date3>60*60*24*1000){alert("开始时间与结束时间间隔大于24小时!");return false;}if(!$("#searchDateRange").val() || $("#searchDateRange").val()=="填写时间段"){alert("时间区段不能为空!");return false;}if(!$("#calling").val() && !reg.test($("#calling").val())){alert("请输入全数字!");}//查询时候设置按钮不可用$("#queryDataByParams").attr("disabled", true);var queryData={"startseg":$("#searchDateRange").val(),"callseg":$("#calling").val(),"identifiCode":$("#identifiCode").val(),"areaId":$("#areaId").val(),"serviceType":$("#serviceType").val(),"serviceGroup":$("#serviceGroup").val(),"areaCode":$("#areaCode").val(),"gprsNode":$("#gprsNode").val(),"distritNum":$("#distritNum").val(),"protocolType":$("#protocolType").val()};if(table1!=null || table1 !=undefined){//        dataTable初始化之后不能再设值,需要销毁重新定义,(数据量大时不适用)
//            table1.destroy();
//            bigDataTable(queryData);//              var src={
//                url:"getJson_BigData_queryDataByParams",
//                dataSrc :"dataList",      //自定义数据源,默认为data
//                type:"post",
//                data:{"test":$("#protocolType").val()}
//              };//            table1.fnSettings().ajax=src; //ajax访问数据
//            table1.fnPageChange(0,true);  //分页的页数从0开始table1.settings()[0].ajax.data=queryData;table1.ajax.reload();}else{bigDataTable(queryData);}});


上面是前台分页,如果要做后台分业,当然最好就是用后台分页:

1.修改datatable初始化属性,新增

"serverSide":true,    //true代表后台处理分页,false代表前台处理分页

2.后台即可获取到每页数据,当前页参数

	private int length;private int start:public int getLength(){return length;}public void setLength(int length){this.length = length;}public int getStart(){return start;}public void setStart(int start){this.start = start;}

我的后台是用struts2写的,其他的也可以用request里面获取,这个值初始化设置之后会一起返回给后端的,然后后端操作数据库的时候,就可以根据这两个参数就行真分页了。


public String dataPaging(){resultJson = new HashMap<String,Object>();searchItem = getRequest().getParameter("extra_search");List<Log> list = new ArrayList<Log>();list = logService.queryForPaging(start,length,searchItem);int count = logService.queryForPagingSize(searchItem);resultJson.put("draw", Integer.toString(draw));resultJson.put("recordsTotal", Integer.toString(count));resultJson.put("recordsFiltered",  Integer.toString(count));resultJson.put("data", list);return "success";}

public List<T> queryForPaging(int start,int length,String query) {Criteria cri = getSession().createCriteria(this.persistentClass);cri.addOrder(Order.desc("id")).setFirstResult(start).setMaxResults(length);if(query != null && !"".equals(query)){cri.add(Restrictions.like("username", query, MatchMode.ANYWHERE));}List<T> list = cri.list();return list;}


前后台数据交互:

前台格式:

 <table id="activityList" class="table table-bordered table-hover"><thead><tr><th width="10%">ID</th><th width="15%">店铺名称</th><th width="15%">优惠活动</th><th width="15%">开始时间</th><th width="15%">结束时间</th><th width="15%">操作</th></tr></thead><tbody></tbody></table>

 columns:[{ data: 'id' },{ data: 'storeInfo.realName'},{ data: 'content' },{ data: 'startTime',"render": function ( data, type, full, meta ) {var dataStr = Date.parse(data);return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");}},{ data: 'endTime',"render": function ( data, type, full, meta ) {var dataStr = Date.parse(data);return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");}},{data:'id',"render": function ( data, type, full, meta ) {var edithtml ="<button class=\"btn btn-info\" type=\"button\" οnclick='editorActivity()'>编辑</button> "+"<button class=\"btn btn-info\" type=\"button\" οnclick='deleteActivity()'>删除</button>"return edithtml;}}],

日期格式化:
 Date.prototype.Format = function (fmt) { //author: meizzvar o = {"M+": this.getMonth() + 1, //月份"d+": this.getDate(), //日"h+": this.getHours(), //小时"m+": this.getMinutes(), //分"s+": this.getSeconds(), //秒"q+": Math.floor((this.getMonth() + 3) / 3), //季度"S": this.getMilliseconds() //毫秒};if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;}

后台返回的json数据:
{"resultList": [{"content": "元旦大促销活动","endTime": "2016-01-03T22:00:00","id": 1,"startTime": "2016-01-01T08
:00:00","storeInfo": {"buildingId": 3,"buildingName": "一号楼","floorId": 4,"floorName": "一层","id": 1,"realName": "KFC","siteId": 2,"siteName": "河西万达","storeId": 7,"storeName": "Z1","zoneId": 1,"zoneName": "万达企业"}},{"content": "手撕汉堡,新品上市,买一送一","endTime": "2015-12-30T14:43:38","id": 2,"startTime": "2015-12-29T14:43:34","storeInfo": {"buildingId": 3,"buildingName": "一号楼","floorId": 4,"floorName": "一层","id": 1,"realName": "KFC","siteId": 2,"siteName": "河西万达","storeId": 7,"storeName": "Z1","zoneId": 1,"zoneName": "万达企业"}},{"content": "麻麻黑,免费吃,只
要你能吃得完,随便吃","endTime": "2016-02-15T14:45:05","id": 3,"startTime": "2016-02-01T14:44:53","storeInfo": {"buildingId": 3,"buildingName": "一号楼","floorId": 4,"floorName": "一层","id": 1,"realName": "KFC","siteId": 2,"siteName": "
河西万达","storeId": 7,"storeName": "Z1","zoneId": 1,"zoneName": "万达企业"}}]
}


中文文档:点击打开链接


这篇关于datatable分页指南--前台分页和后台分页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/906653

相关文章

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

Python包管理工具pip的升级指南

《Python包管理工具pip的升级指南》本文全面探讨Python包管理工具pip的升级策略,从基础升级方法到高级技巧,涵盖不同操作系统环境下的最佳实践,我们将深入分析pip的工作原理,介绍多种升级方... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

PowerShell中15个提升运维效率关键命令实战指南

《PowerShell中15个提升运维效率关键命令实战指南》作为网络安全专业人员的必备技能,PowerShell在系统管理、日志分析、威胁检测和自动化响应方面展现出强大能力,下面我们就来看看15个提升... 目录一、PowerShell在网络安全中的战略价值二、网络安全关键场景命令实战1. 系统安全基线核查

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach