扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
写在前面：
最近在做的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('Total rows ');
$("div[class='pull-left pagination-detail']").append(''+data.total+'; ');
$("div[class='pull-left pagination-detail']").append(' records per page');另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网