[jQuery]jQuery DataTables插件自定义Ajax分页实现

最新推荐文章于 2022-02-16 20:28:05 发布

seayxu

最新推荐文章于 2022-02-16 20:28:05 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/SeayXu/article/details/51580609

版权

本文介绍了如何在无法修改后端接口的情况下，利用jQuery DataTables插件通过自定义Ajax分页实现前端分页效果。通过在请求前重组数据并模拟后端分页的数据格式，成功解决问题。

摘要由CSDN通过智能技术生成

JQuery DataTables插件自定义Ajax分页实现

前言

昨天在博客园的博问上帮一位园友解决了一个问题，我觉得有必要记录一下，万一有人也遇上了呢。

问题描述

园友是做前端的，产品经理要求他使用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-

最低0.47元/天解锁文章

seayxu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[jQuery]jQuery DataTables插件自定义Ajax分页实现

前言昨天在博客园的博问上帮一位园友解决了一个问题，我觉得有必要记录一下，万一有人也遇上了呢。问题描述园友是做前端的，产品经理要求他使用jQuery DataTables插件显示一个列表，要实现分类效果。后端的分页接口已经写好了，不涉及条件查询，需要传入页码(pageNo)和页面显示数据条数(pageSize)，显示相应页的显示记录，且不能修改后端接口。分析先来分析下分页实现。一是后端
复制链接

扫一扫

专栏目录