JavaScript

超轻量级php框架startmvc

DataTables添加额外的查询参数和删除columns等无用参数实例

更新时间:2020-05-21 12:30:01 作者:startmvc
废话不多说,直接上代码//1.定义全局变量variStart=0,searchParams={};//2.配置datatable的ajax配置项"a

废话不多说,直接上代码


//1.定义全局变量
var iStart = 0, searchParams={};

//2.配置datatable的ajax配置项
"ajax": {
 "url": "/user/query",
 "type": "POST",
 //动态请求参数设置,会应用到每次请求
 "data": function (d) {
 //删除多余请求参数
 for(var key in d){
 if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
 delete d[key];
 }
 }
 //附加查询参数
 if(searchParams){
 $.extend(d,searchParams); //给d扩展参数
 }
 },
 //数据源处理(当数据加载完毕时触发)
 "dataSrc": function ( json ) {
 iStart = json.start + 1; //起始行号
 return json.data;
 }
 }

//3.查询按钮绑定点击事件
 /**
 * 搜索
 */
 $('.search').click(function () {
 reloadTable();
 });

//4.刷新表格方法
/**
 * 重新加载表格,刷新页码
 */
function reloadTable() {
 //希望搜索一次附加参数,修改搜索条件后,如果不点击搜索按钮,切换页码仍使用上次参数
 var number = $("#number").val();
 var name = $("#name").val();
 searchParams.number = number;
 searchParams.name = name;

 var table = $('#userTable').DataTable();
 table.ajax.reload();
}

//5.刷新表格,页码不变方法
/**
 * 刷新表格,不改变页码
 */
function refreshTable() {
 var table = $('#userTable').DataTable();
 table.draw(false);
}

//6.跳页实现
$('#example').DataTable().page(5).draw(false)
或者
$('#example').DataTable().page(5).draw('page')

以上这篇DataTables添加额外的查询参数和删除columns等无用参数实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

datatables 参数