引导表-每页自定义可编辑记录数

写在前面：

对于最近做的person功能，由于后期系统人数较多，不需要找Person，所以需求方会要求每页显示的人数可以自己编辑，而不是固定写下每页显示的人数。

让我们看看bootsrap-table的图片，它可以切换每页显示的记录数。

其实我觉得用这个下拉框选择每页显示的记录数非常方便，只需要给出几个值。然而，为了更人性化和方便，它需要改变。初步的想法是直接把这里的下拉框改成输入输入框就可以了。事实上，最后还是做了。

先说说转型的想法。对于转换原始html页面显示，肯定需要使用浏览器的调试功能来检查这里的组件；确定原始组件代码后，移除原始显示组件并拼接自己的html。

从截图中，我们可以看到这里的html代码是一个大div，它包含两个小div，一个在左边显示每页的记录数，另一个在右边显示页数。所以现在是时候获取左边的div，去掉它，拼接你自己的html了。

原始表格左侧的Html代码图：

从上图中可以看出，这个div可以通过类获得，因此您可以使用下面的代码删除原始的div内容，然后追加来拼接您自己的div内容

//自定义和编辑每页显示的记录数$(' div[class=' pull-left page-detail ']')。empty()；$(' div[class=' pull-left paging-detail ']')。追加(' span总行数/SPan ')；$(' div[class=' pull-left paging-detail ']')。追加(' span id=' TotalCount ' ' data . total '/span；');$(' div[class=' pull-left paging-detail ']')。追加(' input id=' PageSize ' name=' PageSize ' value=' temp ' style=' text-align : center；width :30 px '/每页记录数')；请注意，这段代码不能放在任何地方。由于该表在成功加载后会发生更改，因此可以将代码放入onLoadSuccess方法中。

以下是重建的图片：

现在页面显示已经达到了想要的效果，如何获取这个值并在每次点击查询时发送到后台？

查看bootstrap-table.js的源代码，可以大致得出params.limit是用this.options.pageSize计算的，右边的总页数也是用this.options.pageSize计算的，所以现在的重点是如何获取pageSize属性，然后在获取之后，只需要将输入框的值赋给这个pageSize。

幸运的是，上帝会有回报的。经过一个多小时的折磨，可以在jsp页面中使用this.pageSize获得。哈哈哈哈.(虽然我不太明白为什么，但是写完之后我会在js中看看这个的指向用法)。现在，您可以为页面大小分配一个值，但是每次刷新页面查询时，输入框都会被刷新和恢复。我该怎么办？

在这里，我做了一个隐藏标签，每次都用来保存这个值。当它再次刷新时，我从隐藏标签中获取值，并将其分配给这个输入框，然后显示它。(因为这个输入框每次刷新表格也会刷新，需要重新分配。)

这里差不多完成了，一些小细节可以根据自己的项目需求来实现。接下来，贴上主要代码部门，以免以后忘记。

div style=' height:380px溢出-y : auto；'%-用于每次接收值或将值传递到输入框-%span隐藏id='隐藏页面大小' 15/span表格id='表格'/表格/div摘要

以上是边肖介绍的引导表自定义每页可编辑记录数。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！