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实现获取cookie过期时间的变通方法
Aug 14 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
JavaScript实现省市联动效果
Nov 22 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 高手之路(三)
2006/10/09 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
python列表去重的二种方法
2014/02/14 Python
python代码实现ID3决策树算法
2017/12/20 Python
python实现图像识别功能
2018/01/29 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
Python字符串的修改方法实例
2019/12/19 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
eBay德国站:eBay.de
2017/09/14 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
《老山界》教学反思
2014/04/08 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis