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 firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
smarty实现多级分类的方法
2014/12/05 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
jupyter notebook 重装教程
2020/04/16 Python
python实现马丁策略的实例详解
2021/01/15 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
化工机械应届生求职信
2013/11/04 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
开学典礼观后感
2015/06/15 职场文书
证婚人致辞精选
2015/07/28 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS