在DataTable的服务器端动态分页中,我们介绍了服务器端模式下数据采集的实现。在实际应用中,除了后台分页功能,往往还需要实现自定义搜索条件的查询。在数据表中实现自定义搜索条件的要点
实现自定义参数的获取并传递到后台。初始化表后,再次搜索实现。在DataTable的serverSide动态分页中,我们实现了ajax属性的自定义功能,实现了后台分页。现在我们将添加自定义搜索条件的功能:
var server=函数(数据、回调、设置){ 0
var draw=data.draw//需要在回调函数中返回请求的序列号。
var start=data.start//当前页面数据的起始值,默认从0开始。
var len=data.length//每页最大记录数。
var page num=start/len 1;//当前页码
var formObj=$('#searchForm ')。serializeJson();//searchForm是一个搜索表单。
var param={ };//
//serializeJson函数输出的是一个类似于{'hobby' :' eat ',' sex' 3360' man '的对象对象}。
//实现自定义搜索条件的获取。
$.每个(formObj,函数(项){ 0
param[item]=JSON[item];
});
param.pageNum=pageNum//当前页码。
param.pageSize=len//页数
//以上实现可以根据实际情况转移起始位置或页码的参数。
//这里省略了关于排序的代码,
//如果需要,可以在DataTable实现服务器(serverSide)的动态分页中进行检查。
//后台ajax请求一般可以根据实际需要进行调整。
$.Ajax({ 0
键入:“开机自检”,
Url: 'url后台请求路径',//需要更改为您的后台请求路径。
数据:参数,//为程序集传入的参数
contentType:“应用程序/JSON;”,
数据类型: 'json ',
成功:函数(结果){//数据
if(result . code==0){ 0
///回调:函数对象,DataTables获取数据前必须执行;
//并将返回的数据作为回调()的唯一参数。(数据表的页面信息可以在参数中配置)
回调({ 0
图纸:图纸,
Data: result.data,//后台请求结果数据,根据实际情况调整。
记录总数:结果。总计,//数据行总计
记录已过滤: result.total//的数据行总数
});
}
}
});
};//
//表初始化加载方法如下:
$('#table1 ')。数据表({ 0
//.省略了其他配置。
Searching ' : false,//是否允许Datatables开始本地搜索,此选项属性设置为off。
ServerSide': true,//打开服务器模式。
ajax':服务器
});
当我们实现第二次搜索时,就不能再用上面的方式加载表单了。重新加载数据,DataTable是由ajax.reload()实现的。在实现之前,请看看官方文件中对上述api接口的描述:
ajax.reload(回调,重置页面)
//用于重新加载数据。
//这个方法通过使用定义的url,提供了一种重新请求服务器检索表显示数据的方法。
//如果需要更改请求路径,可以使用ajax.url()。
//参数描述:
1 .回调:函数类型,这个回调方法在服务器返回的数据被重绘时执行,回调方法返回服务器返回的数据。
2 .重置分页:重置(默认或设置为真)或保留分页信息(设置为假)。要操作DataTable的Api接口,首先需要获取Api实例,获取Api实例有三种方式:
$(选择器)。DataTable();$(选择器)。dataTable()。API();new $.fn.dataTable.Api(选择器);具体实现代码:
//与原代码相比,增加了一个Api实例变量的定义。
var tableApi=$('#table1 ')。数据表({ 0
//.省略了其他配置。
Searching ' : false,//是否允许Datatables开始本地搜索,此选项属性设置为off。
ServerSide': true,//打开服务器模式。
ajax':服务器
});
//重载数据实现,通常是一个查询按钮事件。
tableapi . Ajax . reload();//无默认回调函数和分页不复位,但不需要参数。
//调用上述方法时,会重新执行服务器方法,即检索表单数据(自定义搜索条件)、分页信息、排序信息等。如果在此基础上不理解或实现其他功能,请留言。