jQuery DataTables插件自定义Ajax分页实例解析
发布时间：2020-12-15 23:26:58 所属栏目：百科 来源：网络整理
导读：一、问题描述 园友是做前端的，产品经理要求他使用jQuery DataTables插件显示一个列表，要实现分类效果。 后端的分页接口已经写好了，不涉及条件查询，需要传入页码(pageNo)和页面显示数据条数(pageSize)，显示相应页的显示记录，且不能修改后端接口。 二、
一、问题描述园友是做前端的，产品经理要求他使用jQuery DataTables插件显示一个列表，要实现分类效果。后端的分页接口已经写好了，不涉及条件查询，需要传入页码(pageNo)和页面显示数据条数(pageSize)，显示相应页的显示记录，且不能修改后端接口。 二、分析先来分析下分页实现。 一是后端分页：这种情况下，在后端很容易实现，在官网上有示例，不多说明。 二是前端分页：前端分页也是支持的，不过需要一次把所有数据都获取到才可以。看到这里，问题来了。由于后端在目前的情况下是更改不了，只能在前端实现。但是，现在又不满足前端分页的条件： 一次性获取所有数据（现在后端数据接口只能返回相应页码的数据）。 介于目前的情况，获取的数据只有一页，没有所有的页码。 试试能不能 伪装一下后端分页的情况，就是开启后端分页，在请求之前，将传入的数据进行重组，在获取到数据后，将返回的数据按照后端分页的数据格式组装一遍。经过测试，是可以的。 三、实现通过DataTables配置参数ajax项实现的。关于ajax详细介绍请看官方说明：中文 | 英文ajax接收三种类型的参数： *string： 设置获取数据的url *object：和 jQuery.ajax 定义类似 *function：自定义获取数据的功能 直接上代码吧，都有注释。 前端页面代码： JQuery DataTables插件自定义分页Ajax实现
|