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——表单应用范例
Feb 20 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
jquery实现下载图片功能
Jul 18 jQuery
解决ant Design Search无法输入内容的问题
Oct 29 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高效率写法(详解原因)
2013/06/20 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
python要安装在哪个盘
2020/06/15 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
法学专业应届生求职信
2013/10/16 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
学校大课间活动方案
2014/01/30 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
经营目标责任书
2015/05/08 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
任命书格式范文
2015/09/22 职场文书