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的执行顺序
Apr 04 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
javascript实现固定侧边栏
Feb 09 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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
Yii配置文件用法详解
2014/12/04 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python查询sqlite数据表的方法
2015/05/08 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
django queryset相加和筛选教程
2020/05/18 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
利用python 读写csv文件
2020/09/10 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
化工专业推荐信范文
2013/11/28 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
民间借贷协议书范本
2014/10/01 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015新年寄语大全
2014/12/08 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
利用python进行数据加载
2021/06/20 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript