jQuery DataTables插件自定义Ajax分页实例解析


Posted in Javascript onApril 28, 2020

一、问题描述

园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果。

后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口。

二、分析

先来分析下分页实现。

一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明。
二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以。

看到这里,问题来了。由于后端在目前的情况下是更改不了,只能在前端实现。但是,现在又不满足前端分页的条件

一次性获取所有数据(现在后端数据接口只能返回相应页码的数据)。

介于目前的情况,获取的数据只有一页,没有所有的页码。
试试能不能伪装一下后端分页的情况,就是开启后端分页,在请求之前,将传入的数据进行重组,在获取到数据后,将返回的数据按照后端分页的数据格式组装一遍。

经过测试,是可以的。

三、实现

通过DataTables配置参数ajax项实现的。关于ajax详细介绍请看官方说明:中文 | 英文

ajax接收三种类型的参数:
*string: 设置获取数据的url
*object:和 jQuery.ajax 定义类似
*function:自定义获取数据的功能
直接上代码吧,都有注释。
前端页面代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jquery DataTables插件自定义分页ajax实现</title>
 <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" media="screen">
 <link href="http://cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" media="screen">
 <link href="http://cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="row-fluid">
 <h3>JQuery DataTables插件自定义分页Ajax实现</h3>
 <table id="example" class="display table-striped table-bordered table-hover table-condensed" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>编号</th>
 <th>姓名</th>
 <th>性别</th>
 </tr>
 </thead>
 </table>
</div>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
 $(function () {
 //提示信息
 var lang = {
 "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": "末页",
 "sJump": "跳转"
 },
 "oAria": {
 "sSortAscending": ": 以升序排列此列",
 "sSortDescending": ": 以降序排列此列"
 }
 };

 //初始化表格
 var table = $("#example").dataTable({
 language:lang, //提示信息
 autoWidth: false, //禁用自动调整列宽
 stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合
 processing: true, //隐藏加载提示,自行处理
 serverSide: true, //启用服务器端分页
 searching: false, //禁用原生搜索
 orderMulti: false, //启用多列排序
 order: [], //取消默认排序查询,否则复选框一列会出现小箭头
 renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui
 pagingType: "simple_numbers", //分页样式:simple,simple_numbers,full,full_numbers
 columnDefs: [{
 "targets": 'nosort', //列的样式名
 "orderable": false //包含上样式名‘nosort'的禁止排序
 }],
 ajax: function (data, callback, settings) {
 //封装请求参数
 var param = {};
 param.limit = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
 param.start = data.start;//开始的记录序号
 param.page = (data.start / data.length)+1;//当前页码
 //console.log(param);
 //ajax请求数据
 $.ajax({
 type: "GET",
 url: "/hello/list",
 cache: false, //禁用缓存
 data: param, //传入组装的参数
 dataType: "json",
 success: function (result) {
 //console.log(result);
 //setTimeout仅为测试延迟效果
 setTimeout(function () {
 //封装返回数据
 var returnData = {};
 returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
 returnData.recordsTotal = result.total;//返回数据全部记录
 returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
 returnData.data = result.data;//返回的数据列表
 //console.log(returnData);
 //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
 //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
 callback(returnData);
 }, 200);
 }
 });
 },
 //列表表头字段
 columns: [
 { "data": "Id" },
 { "data": "Name" },
 { "data": "Sex" }
 ]
 }).api();
 //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
 });
</script>
</body>
</html>

JSON数据格式:

jQuery DataTables插件自定义Ajax分页实例解析

效果图:

jQuery DataTables插件自定义Ajax分页实例解析

精彩专题分享:jquery分页功能操作 JavaScript分页功能操作

本文就介绍到这里,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 #Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 #Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 #Javascript
IScroll5 中文API参数说明和调用方法
May 21 #Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 #Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 #Javascript
jQuery插件pagination实现无刷新分页
May 21 #Javascript
You might like
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
javascript add event remove event
2008/04/07 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
python中的for循环
2018/09/28 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
业务经理的岗位职责
2013/11/16 职场文书
销售文员岗位职责
2013/11/29 职场文书
护士进修自我鉴定
2014/02/07 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers