一、问题描述

园友是做前端的,产品经理要求他使用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="/UploadFiles/2021-04-02/jquery.js">

JSON数据格式:

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

效果图:

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

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

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

标签:
jQuery,DataTables,Ajax,分页

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。