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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
JS排序之快速排序详解
Apr 08 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
javascript的事件描述
2006/09/08 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
使用JS动态显示文本
2017/09/09 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
React优化子组件render的使用
2019/05/12 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python比较两个图片相似度的方法
2015/03/13 Python
详解Python中的文本处理
2015/04/11 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
领导证婚人证婚词
2014/01/13 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
低碳生活倡议书
2014/04/14 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
报到证办理个人委托书
2014/10/06 职场文书
python办公自动化之excel的操作
2021/05/23 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL