Bootstrap-table自定义可编辑每页显示记录数

大佬教程收集整理的这篇文章主要介绍了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"&gt;'+data.total+'</span>;');
$("div[class='pull-left pagination-detail']").append('<input id="pageSize" name="pageSize" value="'+temp+'" style="text-align:center;width:30px"/&gt;records per page');</pre>

大佬总结

以上是大佬教程为你收集整理的Bootstrap-table自定义可编辑每页显示记录数全部内容，希望文章能够帮你解决Bootstrap-table自定义可编辑每页显示记录数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。