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编程起步(第二课)
Jan 10 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php中文验证码实现示例分享
2014/01/12 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
python getopt模块使用实例解析
2019/12/18 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
C语言笔试题
2014/09/04 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
学校经典推荐信
2013/10/30 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
网络维护中文求职信
2014/01/03 职场文书
重阳节登山活动方案
2014/02/03 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
酒店端午节活动方案
2014/08/26 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
销售2014年度工作总结
2014/12/08 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书