Bootstrap Dual Listbox : How to Paginate Options

Question

I am using Bootstrap Dual Listbox for my ruby on rails project.

I have a large dataset and I was wondering if pagination of the options is possible?

I am asking because I am not that good with javascript, and I am thinking that the solution to this is maybe to edit the js code of the plugin itself.

Answer 1

You can use jQuery pagination plugin. You can download the jQuery Pajinate script from its GitHub page and include it with your project (along with jQuery) then you can set up the paginator.

The simple example of jQuery function :

The HTML Code:

<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>

The jQuery Code:

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

});

The CSS Code:

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

Answer 2

you can use kaminari gem for pagination. But to achieve pagination in your listing you need to make ajax call. you need to write ajax call to populate the list of options, and on each scroll the new listing will appears.

For your reference please go through with this link it might helpful: Bootstrap Dual Listbox items disappear when selected if populated from ajax