如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中
页面:
<div>
<form id="exp_form">
查询参数...
<button type="button" onclick="search()" data-icon="search">查询</button>
</form>
</div>
<div>
<table id="exp_table">
</table>
</div>
bootstrap table的js:
function searc(){
$('#exp_table').bootstrapTable('refresh');
}
function queryParams(params) {
参数处理...
}
$('#exp_table').bootstrapTable({
url:"url",
method:"post",
dataType: "json",
striped: true,
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
height:556,
width:1000,
sidePagination:"server",
queryParams:queryParams,
queryParamsType:"limit",
pagination: true,
totalRows:20,
pageNumber:1,
pageSize:20,
pageList:[20,50,100,150],
idField:'keyid',
paginationLoop:false,
columns:[
列定义...
]
,
onPageChange:function(number, size){
queryParams.search=number;
}
});
参数方式是采用函数返回json对象:
1、最开始采用的方式是直接写在json对象中;
function queryParams(params) {
var temp = {
pageSize: params.limit,
pageCurrent: params.offset/params.limit+1,
name:$("#name").val()
};
return temp;
}
但是这样的问题就是,当条件比较多的时候,就会显得很庞大,需要些很多基本雷同的代码。于是就开始思考有没有便捷的方法添加参数,于是产生了下个版本。
2、利用jq的表单序列化方法在url后将表单数据拼接到url后面:
function SignRem_Init(){
var opt = {
url: "SignRemData.do?"+$("#exp_form").serialize()
};
$('#exp_table').bootstrapTable('refresh',opt);
}
$('#exp_table').bootstrapTable({
url:"url?"+$("#exp_form").serialize(),
...
}
满以为已经解决问题,确在测试时发现了问题,查询什么的是可以了,但当翻页时,发现只有分页参数被提交了,表单数据没有被同步提交,触发翻页函数后bootstrap table只是更新新了参数函数里面的参数,于是思考怎么把表单放到参数函数中去,于是有了第三个版本。
3、自定义一个函数将表单转为json兑现。
表单转json兑现的函数(利用了jq的表单序列化为数组的方法):
$.fn.serializeJsonObject = function() {
var json = {};
var form = this.serializeArray();
$.each(form, function() {
if (json[this.name]) {
if (!json[this.name].push) {
json[this.name] = [ json[this.name] ];
}
json[this.name].push( );
} else {
json[this.name] = this.value || '';
}
});
return json;
}
function queryParams(params) {
var temp = $("#exp_form").serializeJsonObject();
temp["pageSize"]=params.limit;
temp["pageCurrent"]=params.offset/params.limit+1;return temp;
}
利用得到的表单json对线,将分页参数放入。这下就可以用这个通用的方式,来将表单参数放入,不用担心参数多少的问题了。
如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中的更多相关文章
- Bootstrap Table 表格参数详解
表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...
- Bootstrap Table相关参数及属性、方法
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6
- mybatis3.1-[topic-18-20]-_映射文件_参数处理_单个参数&多个参数&命名参数 _POJO&Map&TO 三种方式及举例
笔记要点出错分析与总结 /**MyBatis_映射文件_参数处理_单个参数&多个参数&命名参数 * _POJO&Map&TO 三种方式及举例 _ * 单个参数 : #{ ...
- ASP.NET MVC API与JS进行POST请求时传递参数 -CHPowerljp原创
在API前添加 [HttpPost] 表示只允许POST方式请求 [HttpPost] public IHttpActionResult Get_BIGDATA([FromBody]Datas ...
- BootStrap table 传递搜索参数
看bootStrap table文档不难发现它有一个queryparams属性,是向后台传递参数的,默认参数已有pageSize.pageIndex等,那么怎么传递自定义的参数呢?在网上找了好多也没有 ...
- C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例
C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...
- WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配
原文:WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 网上的 ...
- phpcms搜索给分页代码添加参数方法
在使用PHPCMS开发网站时遇到了一个搜索功能,需要在搜索结果分页链接上添加一些传递的参数,不然不能够正确翻页. 方法: 找到\phpcms\libs\functions\global.func.ph ...
- uniapp自定义顶部搜索框兼容微信小程序
zhuanzai: uniapp自定义顶部搜索框兼容微信小程序 自定义组件 navbarvue (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...
随机推荐
- To me
1.流泪的时候不做任何决定: 2.不反复思考同一个问题: 3.不害怕做错什么: 4.有负面情绪是正常的: 5.一切的烦恼都是自找的: 6.说过的话一定要做到: 7.不要去害怕做一件事: 8.无论是对是 ...
- linux_vim编辑文件无法高亮显示解决方法
打开/etc/vimrc(/etc/vim/vimrc不同版本,可能不一样) 在文档最后添加下面内容 syntax on 如图所示:我添加了高亮显示和显示行数 syntax on set nu 修改完 ...
- 【NOIP2013/Codevs3287】货车运输-最小生成树(大)-树上倍增
https://www.luogu.org/problemnew/show/P1967 由题可知,我们走的路的边应尽可能大,所以通过kruscal建最大生成树的图,再树上倍增,注意可能有多棵树; #i ...
- [solution] JZOJ-5795 词典
[solution]JZOJ-5795 词典 题面 Description 小C有$n$个字符串$T_1 T_n$,给出$m$个询问 第$i$个询问给出一个字符串$S_i$,对于每个询问,我们可以得到 ...
- Hadoop 综合揭秘——MapReduce 基础编程(介绍 Combine、Partitioner、WritableComparable、WritableComparator 使用方式)
前言 本文主要介绍 MapReduce 的原理及开发,讲解如何利用 Combine.Partitioner.WritableComparator等组件对数据进行排序筛选聚合分组的功能.由于文章是针对开 ...
- Visual Studio 代码片段
管理界面 打开 工具 >> 代码片段管理器 界面 使用步骤 选择对应语言. 选择一个片段的文件夹. 打开该文件夹的位置. 复制任意一个片段. 对复制出来的片段进行修改.(具体修改内容见例子 ...
- setlocale()函数详解——C语言
setlocale函数 函数原型:char* setlocale (int category, const char* locale); setlocale位于头文件,setlocale() 函数既可 ...
- CentOS防火墙配置
1.查询防火墙状态 service iptables status 2.开启防火墙 service iptables start 3.关闭防火墙 service iptables stop 4.重启防 ...
- Java的面向对象(初涉)
Java的面向对象(初涉) 面向对象的分析根据抽象关键的问题域来分解系统.面向对象的设计是一种提供符号设计系统的面向对象的实现过程,它用非常接近实际领域术语的方法把系统构造成"现实世界&qu ...
- python中使用双端队列解决回文问题
双端队列:英文名字:deque (全名double-ended queue)是一种具有队列和栈性质的抽象数据类型. 双端队列中的元素可以从两端弹出,插入和删除操作限定在队列的两边进行. 双端队列可以在 ...