Bootstrap-table⾃定义可编辑每页显⽰记录数
写在前⾯：
  最近在做的person功能，由于后期系统中person⼈数较多，不利⽤查person，故需求⽅将要求可以⾃⼰编辑每页显⽰的数⽬，⽽不是固定的写死每页显⽰的数⽬。
  下⾯先来看下bootsrap-table⾃带的可切换每页显⽰记录数的图⽚
  其实我感觉⾃带的这个下拉框选择每页显⽰的记录数，已经很⽅便啦，只需要给⼏个值就可以了，但是为了更加⼈性化与⽅便，就要改的呢，初步想的是，直接将此处的下拉框改为⼀个input输⼊框就可以了。事实上，最后也是这么做的。
  下⾯先⼤概说⼀下改造的思路吧。对于改造原有的html页⾯的显⽰，肯定是要利⽤浏览器的调试功能去查看此处的组件的组成；确定了原有的组件代码后，将原有的显⽰组件移除，拼接⾃⼰的html。
  通过捕获可知，此处的html代码是⼀个⼤div,⾥⾯包含两个⼩div,⼀个为上图左边显⽰每页记录数的，另⼀个为右边显⽰多少页的。那么现在就是要将左边的div获取到，然后移除，并拼接⾃⼰的html.
  原表格左边的html代码图：
　从上图可以看到，可以通过class来获取到此div，故可以使⽤下⾯的代码，现将原来的div的内容移除，再append拼接⾃⼰的div内容
        //⾃定义可编辑每页显⽰的记录数
$("div[class='pull-left pagination-detail']").empty();
$("div[class='pull-left pagination-detail']").append('<span>Total rows</span>  ');
$("div[class='pull-left pagination-detail']").append('<span id="totalCount">'+al+'</span>;  ');
$("div[class='pull-left pagination-detail']").append('<input id="pageSize" name="pageSize" value="'+temp+'" style="text-
align:center;width:30px"/>  records per page');
  注意，此段代码不是什么地⽅都可以放的，由于是在table被加载成功后，才去改变，故此代码可以放在onLoadSuccess⽅法⾥。
  下⾯是改造后的图：
  现在页⾯显⽰达到想要的效果了，那么如何每次点击查询的时候，去获取到此值，并发送给后台呢？
  通过查看bootstrap-table.js的源码可以⼤致得出，params.limit是经过this.options.pageSize计算得来的，右边的总页数也是经过
this.options.pageSize计算得来的，那么现在的重点就是如何获取到pageSize属性，然后获取到后，只需要将输⼊框的值赋值给这个pageSize就可以了。
  好在皇天不负有⼼⼈，经过⼀个多⼩时的折磨后，测试出来在jsp页⾯使⽤this.pageSize就可以获取到了。(虽然还不是很明⽩为什么，待会写完就去看看js中this的指向⽤法)。现在可以给pageSize赋值了，但是页⾯查询每次刷新后，input输⼊框也会被刷新还原，那怎么办？
  这⾥我做了⼀个隐藏的标签，⽤于每次将此值保存，当再次刷新时，再从隐藏的标签中拿值然后赋值给此输⼊框，显⽰出来，(由于每次刷新table此输⼊框也会被刷新，故需要重新赋值)
  做到这⾥也就差不多了，⼀些⼩细节可以根据⾃⼰的项⽬需求再去实现。下⾯，还是把主要的代码部门贴上来，以免之后忘记了。。
<div >
<%--⽤于每次给输⼊框接收或传递值--%>
<span hidden id="hiddenPageSize">15</span>
<table id="table"></table>
</div>
  好啦，⼤致改造的过程就是这个样⼦啦，如果有相同需求的伙伴们可以参考⼀下。。。。。现在我去看js的this指向去了~~~~~~  这⾥补充⼀下serializeForm()函数
//序列化表单
function serializeForm(form){
var obj = {};
$.each(form.serializeArray(),function(index){
if(obj[this['name']]){
obj[this['name']] = obj[this['name']] + ','+this['value'];
} else {
obj[this['name']] =this['value'];
}
});
return obj;
bootstrap项目}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。