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 相关文章推荐
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
Postman无法正常返回结果问题解决
Aug 28 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
详解JavaScript RegExp对象
2017/02/04 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
Python线程中对join方法的运用的教程
2015/04/09 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
浅析python的Lambda表达式
2019/02/27 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
用python做游戏的细节详解
2019/06/25 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
生日宴会答谢词
2014/01/09 职场文书
秘书英文求职信
2014/04/16 职场文书
生日答谢词
2015/01/05 职场文书
百日宴上的祝酒词
2015/08/10 职场文书