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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
教你如何使用php session
2013/10/28 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
js date 格式化
2017/02/15 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
python的文件操作方法汇总
2017/11/10 Python
详解python里的命名规范
2018/07/16 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
Python修改列表值问题解决方案
2020/03/06 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
纬创Java面试题笔试题
2014/10/02 面试题
法律专业推荐信范文
2013/11/29 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
工作会议欢迎词
2014/01/16 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
社区禁毒工作方案
2014/06/02 职场文书
应届毕业生自荐书
2014/06/18 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
python+opencv实现目标跟踪过程
2022/06/21 Python