Bootstrap 双列表框：如何对选项进行分页

Posted 2023-05-08

【中文标题】Bootstrap 双列表框：如何对选项进行分页

【英文标题】：Bootstrap Dual Listbox : How to Paginate Options

【发布时间】：2018-12-07 00:37:58

【问题描述】：

我在我的 ruby​​ on rails 项目中使用Bootstrap Dual Listbox。

我有一个大型数据集，我想知道是否可以对选项进行分页？

我问是因为我对javascript不太擅长，我认为解决这个问题的方法可能是编辑插件本身的js代码。

【参考方案1】：

您可以使用 jQuery 分页插件。 您可以从其 GitHub 页面下载 jQuery Pajinate 脚本并将其包含在您的项目中（连同 jQuery），然后您可以设置分页器。

jQuery函数的简单例子：

html 代码：

<div id="test-list">
<input type="text" class="search" />
<ul class="list">
  <li><p class="name">Guybrush Threepwood</p></li>
  <li><p class="name">Murray</p></li>
  <li><p class="name">Cannibals</p></li>
  <li><p class="name">Rapp Scallion</p></li>
  <li><p class="name">Rum Rogers Sr.</p></li>
  <li><p class="name">Men of Low Moral Fiber</p></li>
</ul>
<ul class="pagination"></ul>

jQuery 代码：

var demoList = new List('test-list', 
valueNames: ['name'],
page: 3,
pagination: true

);

CSS 代码：

.pagination li 
  display:inline-block;
  padding:5px;

【讨论】：

不错！好的，看看这个，谢谢。一旦我让它工作，我会更新这个线程，并添加一些关于我是如何做到的。

【参考方案2】：

您可以使用kaminari gem 进行分页。但要在您的列表中实现分页，您需要拨打ajax 电话。 您需要编写 ajax 调用来填充选项列表，并且在每次滚动时都会出现新的列表。

供您参考，请通过此链接查看它可能会有所帮助：Bootstrap Dual Listbox items disappear when selected if populated from ajax

【讨论】：

是的，我也看到了，所以可以使用 AJAX 填充选项，这意味着它也可以分页。下一步是触发分页，如“下一个”和“上一个”添加在列表框上的按钮。 （“滚动”的分页可能有点困难，所以我先从按钮开始）