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 CSS修改学习第六章 拖拽
Feb 19 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
vue登录路由验证的实现
Dec 13 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
newxtree.js代码
2007/03/13 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Python中的高级数据结构详解
2015/03/27 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
工作推荐信模板
2015/03/25 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
人民币使用说明书
2019/04/17 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS