页面:

<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的参数中的更多相关文章

  1. Bootstrap Table 表格参数详解

    表格参数 名称   标签   类型   默认   描述   - data-toggle String 'table' 不用写 JavaScript 直接启用表格. classes data-class ...

  2. Bootstrap Table相关参数及属性、方法

    http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6

  3. mybatis3.1-[topic-18-20]-_映射文件_参数处理_单个参数&多个参数&命名参数 _POJO&Map&TO 三种方式及举例

    笔记要点出错分析与总结 /**MyBatis_映射文件_参数处理_单个参数&多个参数&命名参数 * _POJO&Map&TO 三种方式及举例 _ * 单个参数 : #{ ...

  4. ASP.NET MVC API与JS进行POST请求时传递参数 -CHPowerljp原创

    在API前添加    [HttpPost] 表示只允许POST方式请求 [HttpPost] public IHttpActionResult Get_BIGDATA([FromBody]Datas  ...

  5. BootStrap table 传递搜索参数

    看bootStrap table文档不难发现它有一个queryparams属性,是向后台传递参数的,默认参数已有pageSize.pageIndex等,那么怎么传递自定义的参数呢?在网上找了好多也没有 ...

  6. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  7. WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配

    原文:WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 WPF Toolkit AutoCompleteBox 实体类绑定 关键字自定义关联搜索匹配 网上的 ...

  8. phpcms搜索给分页代码添加参数方法

    在使用PHPCMS开发网站时遇到了一个搜索功能,需要在搜索结果分页链接上添加一些传递的参数,不然不能够正确翻页. 方法: 找到\phpcms\libs\functions\global.func.ph ...

  9. uniapp自定义顶部搜索框兼容微信小程序

    zhuanzai:  uniapp自定义顶部搜索框兼容微信小程序 自定义组件 navbarvue (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度 < ...

随机推荐

  1. List,set,Map理解

    集合 集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...

  2. @Scheduler与cron

  3. this guy gonna be a daddy

    时间真快,媳妇儿怀孕了两个月了. 2016年2月10日,在横峰血检后确定媳妇儿怀孕后,我心情激动得要飞起来一样,那时,我在心里告诉自己不是个孩子了,我自己即将成为孩子的父亲.当时只顾着自个儿激动,已经 ...

  4. unigui 调用js

    //引用单元uniguiapplicationUniSession.AddJS('alert(unigui调用了JS方法)');

  5. 关于调试WCF时引发的异常XmlException: Name cannot begin with the '<' character, hexadecimal value 0x3C” on Client Side

    问题描述:在使用VS2015调试WCF时,偶遇抛出异常名称不能以“<”字符(十六进制0x3c)开头,平时运行时(不调试)没有问题的. 解决方法:检查后发现为了检查异常的位置,勾选了引发通用语言运 ...

  6. springboot之使用redistemplate优雅地操作redis

    概述 本文内容主要 关于spring-redis 关于redis的key设计 redis的基本数据结构 介绍redis与springboot的整合 sringboot中的redistemplate的使 ...

  7. python 使用进程池Pool进行并发编程

    进程池Pool 当需要创建的子进程数量不多时,可以直接利用multiprocessing中的Process动态成生多个进程,但如果是上百甚至上千个目标,手动的去创建进程的工作量巨大,此时就可以用到mu ...

  8. springboot知识点补充(一)

    测试配置 @RunWith(SpringRunner.class) @SpringBootTest @Configuration @ActiveProfiles("test") p ...

  9. webpack打包工具

    目的:平时小项目中例如一些网站需要进行打包压缩,用这个工具可以进行打包压缩,就可以上传到服务器. 使用方法: 1,引进需要打包的项目,把入口html替换掉项目中的index.html,把引进的js,c ...

  10. sublime text下安装插件autoprefixer

    有时候在写css样式的时候,分不清哪些属性需要前缀,哪些不需要,总是爱搞混淆了,于是autoprefixer这款插件便应运而生了.虽然在使用webpack的时候,我们可以很方便的使用这个,但是,如果项 ...