首页 » 百度SEO » datatables分页seo_DataTable 实现做事器serverSide动态分页

datatables分页seo_DataTable 实现做事器serverSide动态分页

访客 2024-10-18 0

扫一扫用手机浏览

文章目录 [+]

$(document).ready(function() { $('#table1').dataTable( { "serverSide": true,//开启做事器模式 "ajax": "后台URL要求"//数据来源(处理分页) } );} );

下面我们再来理解下ajax参数,ajax属性吸收三种类型的参数:

string:设置获取数据的URL。
object:和jQuery.ajax定义类似。
function:自定义获取数据的功能。

这里我们利用function来实现。
所这里先理解下function的干系内容。

datatables分页seo_DataTable 实现做事器serverSide动态分页 datatables分页seo_DataTable 实现做事器serverSide动态分页 百度SEO

function ajax( data, callback, settings )官方给出的描述: 作为一个函数,这个可以完备自己掌握Ajax要求,要求参数,返回的数据都可以不受 DataTables 的影响。
事实上你可以利用非Ajax要求,而直策应用本地储存。
你可以直接从本地数据库获取数据交给 callback 去处理。
官方给出的参数描述: 1. data:object工具,是发送给做事器的数据。
2. callback :function工具,必须被实行,DataTables才能获取到数据;且将返回的数据作为callback()的唯一参数.(参数中可以配置Datatable的页面信息) 3. settings:Datatables的设置工具。

下面给出上述函数实现:

datatables分页seo_DataTable 实现做事器serverSide动态分页 datatables分页seo_DataTable 实现做事器serverSide动态分页 百度SEO
(图片来自网络侵删)

var server = function(data,callback,settings){ var draw = data.draw; // 要求的序号,须要在callback函数中回传。
var start = data.start;//当前页数据的起始数值,默认是从0开始。
var len = data.length;//每页的最大记录数。
var pageNum = start/len + 1 ;//当前页码 var order = data.order;//排序列数据 var cols = data.columns;//获取初始化表格定义的columns数组工具。
var param = {};// //param= getQueryParam();//这里一样平常自定义实现用于获取查询条件的参数工具。
param.pageNum=pageNum;//当前页码。
param.pageSize=len;//页码条数 //上述实现可根据实际情形传起始位置的参数,还是页码的参数。
//默认第一个排序字段 var orderField = order.length>0?order[0]["dir"]:""; if(!(""==orderField)){ var colIndex = orderField["column"]; var fieldName = data.columns[colIndex]["data"];//获取排序的字段名称 var isAsc = fieldOrder["dir"];//asc:升序,desc:降序 param.order=fieldName;//排序字段 param.isAsc = isAsc;// } //后台ajax要求,一样平常可按照实际需求进行调度。
$.ajax({ type: "POST", url: "url后台要求路径",//须要修正成你的后台要求路径 cache: false, //禁用缓存 data: param, //传入组装的参数 contentType: "application/json;", dataType: "json", success: function (result) {//数据 if (result.code == 0) { //callback :function工具,必须被实行,DataTables才能获取到数据; //且将返回的数据作为callback()的唯一参数.(参数中可以配置Datatable的页面信息) callback({ draw: draw, data: result.data,//后台要求结果数据,根据实际情形进行调度。
recordsTotal: result.total,//数据总行数 recordsFiltered: result.total//数据总行数 }); } } });}

实现上述函数后的调用代码如下:

$(document).ready(function() { $('#table1').dataTable( { "serverSide": true,//开启做事器模式 "ajax": server } );} );

标签:

相关文章

浙江网站设计,技术与文化的完美融合

随着互联网技术的飞速发展,网站设计已成为企业展示形象、传递信息的重要窗口。浙江省作为我国经济、文化、科技的重要发源地,其网站设计更...

百度SEO 2025-01-04 阅读0 评论0

浙江师范大学,百年名校,铸就教育辉煌

浙江师范大学,位于美丽的浙江省金华市,是一所具有百年历史的高等学府。自1907年建校以来,学校始终秉承“明德、博学、求真、创新”的...

百度SEO 2025-01-04 阅读0 评论0