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

一、问题描述：园区朋友是前端，产品经理让他用jQuery DataTables插件显示一个列表，从而达到分类效果。

后端分页接口已经写好，不涉及条件查询。需要传入页码(页码)和页面显示数据号(页面大小)才能显示对应页面的显示记录，后端界面不可修改。

二、分析首先，分析分页实现。一、后端分页：这种情况下，在后端很容易实现，官网有例子，不做解释。二、前端分页：也支持前端分页，但可以一次获取所有数据。

看到这里，问题来了。因为后端目前无法改变，只能在前端实现。但是现在不满足前端分页的条件：

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

目前只有一页数据，并不是所有的页码。尽量伪装后端分页的情况，即打开后端分页，请求前对传入的数据进行重组，获取数据后按照后端分页的数据格式对返回的数据进行组装。

经过测试，是可以的。

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

Ajax接收三种类型的参数：*字符串：设置获取数据的URL对象：类似jQuery.ajax定义*函数：自定义获取数据的函数，只需转到代码，有注释即可。首页代码：

html xmlns=' http://www。w3。org/1999/XHTML ' head title jquery DataTables插件自定义分页创建交互式、快速动态网页应用的网页开发技术实现/title link。bootcss。com/bootstrap/3。3 .6/CSS/bootstrap。量滴CSS ' rel='样式表media=' screen '链接。bootcss。com/DataTables/1。10 .11/CSS/DataTables。自举。量滴CSS ' rel='样式表media=' screen '链接。bootcss。com/DataTables/1 .插件自定义分页埃阿斯实现/h3表id=' example ' class=' display table-striped table-border table-hover table-condential '单元格间距=' 0 '宽度=' 100% '和tr th编号/th姓名/th性别/th/tr/thead/table/div脚本src=' http :3358 cdn。bootscs。com/datatables/1。10 .11/js/jquery。js '/script script src=' http :http://cdn。bootscs。com/bootstrap/3。3 .6/js/自举。量滴js '/script script src=' http 33603358 cdn。bootscs .提示信息var lang={ ' sProcessing ' : '处理中.' sLengthMenu': '每页_MENU_项，' sZeroRecords': '没有匹配结果，' sInfo': '当前显示第_START_至_END_项，共_合计_项。

，' sInfoEmpty': '当前显示0个项目到总共0个项目'，' sInfoFiltered': '(由_MAX_ items筛选)'，' sinfo postfix' : '，' s search' :' search : '，'。表中的SEmptyTable ' : '数据为空，' sLoadingRecords': '正在加载.'，' sinfo things' 3360 '，' opaque ' : { ' s first ' : ' home page '，' Popular' :' Previous '，' sNext':' Next '，' sLast':' Last '，' sJump':' Jump'}，' o aria ' 3360 { ' sSortDescending ' : ' 3://初始化表vartable=$ ('# example ')。datatable ({language: lang，//提示信息autoWidth: false，//禁用列宽条带类：的自动调整['奇数'，'偶数']，//为奇数行和偶数行添加样式，这与不支持CSS伪类的情况兼容。//隐藏加载提示，自己处理serverside3360true路径。//启用服务器端分页搜索：失败。//禁用本机搜索ordermulti3360failure失败。//启用多列排序顺序： []，//取消默认排序查询，否则复选框列中会出现一个小箭头render 3360“Bootstrap”。//呈现样式：bootstrap和jquery-ui分页类型：' simple _ numbers '，//分页样式：simple，simple _ numbers，full，full _ numbers列defs :[{ ' targets ' : ' nosort '，//列' ordered ' : false//的样式名包含禁止排序的样式名' no sort '以上}]。Ajax :函数(数据、回调、设置){//Package请求参数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，//传入已组装的参数datatype3360' JSON '，success:函数(result) {//)。//setTimeout只返回测试延迟效果setTimeout(函数(){//package)的数据var returnData={ }；returndata . draw=data . draw；//这里，draw counter是直接自己返回的，应该由后台作为return data . recordstotal=result . total返回；//返回所有数据记录。returndata . records filtered=result . total；//过滤功能不在后台实现，每个查询都视为所有结果：returndata . data=result . data；//返回数据的列表//console . log(return data)；//调用回调(return DataTables提供的数据，这意味着数据已经封装并返回DataTables进行呈现。//此时数据必须正确，异常判断要自己处理后再执行本次回调。}, 200);} });}，//列标题字段column 3360[{ ' data ' : ' id ' }，{'data' :' name'}，{'data' :' sex'}]})。API()；//这里需要调用api()方法，否则返回JQuery对象而不是DataTables的API对象})；/script/body/htmlJSON数据格式：

效果图：

精彩话题分享：jquery分页函数操作JavaScript分页函数操作。

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