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 23 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
Angular.JS中的this指向详解
May 17 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
小程序选项卡以及swiper套用(跨页面)
Jun 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python的id()函数解密过程
2012/12/25 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
PyQt5实现拖放功能
2018/04/25 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
怎么写好自荐信
2013/10/30 职场文书
珍惜水资源建议书
2014/03/12 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
购房意向书
2014/08/30 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android