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 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
js 函数调用模式小结
Dec 26 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
react高阶组件添加和删除props
Apr 26 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python 读写文件的操作代码
2018/09/20 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
python3 实现调用串口功能
2019/12/26 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
办公室驾驶员岗位职责
2013/11/15 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
改革共识倡议书
2014/08/29 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python