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 相关文章推荐
document.all与WEB标准
May 13 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 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写UltraEdit插件脚本实现方法
2011/12/26 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python 动态调用函数实例解析
2019/10/21 Python
python关于调用函数外的变量实例
2019/12/26 Python
python中的列表和元组区别分析
2020/12/30 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
一道SQL面试题
2012/12/31 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
物流合作计划书
2014/01/10 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
幸福中国演讲稿
2014/09/12 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
律政俏佳人观后感
2015/06/09 职场文书