栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

一、问题描述

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

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

二、分析

先来分析下分页实现。

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

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

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

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

经过测试,是可以的。

三、实现

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

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



 jquery DataTables插件自定义分页ajax实现
 
 
 



 JQuery DataTables插件自定义分页Ajax实现
 
编号 姓名 性别

JSON数据格式:

效果图:

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

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/96857.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号