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

Posted 2020-09-26 追极

//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‘)