欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-12-15 09:12:49|栏目:JavaScript代码|点击:

废话不多说,直接上代码

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

上一篇:Bootstrap实现的经典栅格布局效果实例【附demo源码】

栏    目:JavaScript代码

下一篇:不用MOUSEMOVE也能滑动啊

本文标题:DataTables添加额外的查询参数和删除columns等无用参数实例

本文地址:http://www.codeinn.net/misctech/186906.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有