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


Posted in Javascript onJuly 04, 2017

废话不多说,直接上代码

//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等无用参数实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js select option对象小结
Dec 20 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 #Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
JS全角与半角转化实例(分享)
Jul 04 #Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 #Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 #Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 #Javascript
JavaScript生成图形验证码
Aug 24 #Javascript
You might like
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
js中的string.format函数代码
2020/08/11 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JS实现页面打印功能
2017/03/16 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
php中and 和 &&出坑指南
2018/07/13 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
基于Python __dict__与dir()的区别详解
2017/10/30 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
如何基于线程池提升request模块效率
2020/04/18 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
解决python3输入的坑——input()
2020/12/05 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
给实习单位的感谢信
2014/02/01 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2015年宣传工作总结
2015/04/08 职场文书
SQL Server使用导出向导功能
2022/04/08 SQL Server