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 相关文章推荐
Jquery操作js数组及对象示例代码
May 11 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
JS实现轮播图效果
2020/01/11 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python Socket编程详细介绍
2017/03/23 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
关于python字符串方法分类详解
2019/08/20 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Python读写Excel表格的方法
2021/03/02 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
主办会计岗位职责
2014/03/13 职场文书
保密工作承诺书
2014/08/29 职场文书
开会通知
2015/04/20 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书