List.js
Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
Documentation for List.jsIntegrate List in Falcon by following these easy steps:
- Set unique ID and add
data-list
attribute to the wrapper element and list your column invalueNames
property.<div id="tableExample" data-list='{"valueNames":["name","email","age"]}'> <!-- Your list content will go here--> </div>
- To enable sorting in your column, add
data-sort
attribute and assign column name to the attribute.<th class="sort" data-sort="name">Customer</th>
- Add
list
class to the content wrapper element.<tbody class="list"> <!-- Your value will go here--> </tbody>
- Then wrap your value with column name as a class. For example, if your column name is
name
then the value will be look like this:<td class="name">John Doe</td>
- To add pagination add
.pagination
class inside your wrapper element - To enable button pagination add
data-list-pagination='prev'
anddata-list-pagination='next'
to the "Prev" and "Next" buttons respectively. - To see the list info, add
data-list-info
attribute to a DOM element inside your wrapper element.
<div id="tableExample" data-list='{"valueNames":["name","email","age"],"page":5,"pagination":true}'>
<table class="table table-bordered table-striped fs--1">
<thead class="bg-200 text-900">
<tr>
<th class="sort" data-sort="name">Name</th>
<th class="sort" data-sort="email">Email</th>
<th class="sort" data-sort="age">Age</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="name">Anna</td>
<td class="email">anna@example.com</td>
<td class="age">18</td>
</tr>
<tr>
<td class="name">Homer</td>
<td class="email">homer@example.com</td>
<td class="age">35</td>
</tr>
<tr>
<td class="name">Oscar</td>
<td class="email">oscar@example.com</td>
<td class="age">52</td>
</tr>
<tr>
<td class="name">Emily</td>
<td class="email">emily@example.com</td>
<td class="age">30</td>
</tr>
<tr>
<td class="name">Jara</td>
<td class="email">jara@example.com</td>
<td class="age">25</td>
</tr>
<tr>
<td class="name">Clark</td>
<td class="email">clark@example.com</td>
<td class="age">39</td>
</tr>
</tbody>
</table>
<div class="row align-items-center">
<div class="pagination d-none"></div>
<div class="col">
<p class="mb-0 fs--1">
<span class="d-none d-sm-inline-block" data-list-info="data-list-info"></span>
<span class="d-none d-sm-inline-block"> — </span>
<a class="font-weight-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ml-1" data-fa-transform="down-1"></span></a>
</p>
</div>
<div class="col-auto d-flex"><button class="btn btn-sm" type="button" data-list-pagination="prev"><span>Previous</span></button><button class="btn btn-sm px-4 ml-2" type="button" data-list-pagination="next"><span>Next</span></button></div>
</div>
</div>
Add pagination
class for enable number pagination. The following structure will enable number pagination with next and previous button.
<div class="d-flex align-items-center justify-content-center"><button class="btn btn-sm btn-falcon-default mr-1" type="button" title="Previous" data-list-pagination="prev"><span class="fas fa-chevron-left"></span></button>
<ul class="pagination mb-0"></ul><button class="btn btn-sm btn-falcon-default ml-1" type="button" title="Next" data-list-pagination="next"><span class="fas fa-chevron-right"></span></button>
</div>
Javascript
<script src="vendors/list.js/list.min.js"></script>
Complex example with bulk select
You can see the bulk select implemention for better understanding.
Bulk Select documentationRecent Purchases
<div class="card mb-3" id="recentPurchaseTable" data-list='{"valueNames":["name","email","product","payment","amount"],"page":8,"pagination":true}'>
<div class="card-header">
<div class="row flex-between-center">
<div class="col-6 col-sm-auto d-flex align-items-center pr-0">
<h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Recent Purchases</h5>
</div>
<div class="col-6 col-sm-auto ml-auto text-right pl-0">
<div class="d-none" id="table-purchases-actions">
<div class="d-flex"><select class="form-select form-select-sm" aria-label="Bulk actions">
<option selected="">Bulk actions</option>
<option value="Refund">Refund</option>
<option value="Delete">Delete</option>
<option value="Archive">Archive</option>
</select><button class="btn btn-falcon-default btn-sm ml-2" type="button">Apply</button></div>
</div>
<div id="table-purchases-replace-element"><button class="btn btn-falcon-default btn-sm" type="button"><span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ml-1">New</span></button><button class="btn btn-falcon-default btn-sm mx-2" type="button"><span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ml-1">Filter</span></button><button class="btn btn-falcon-default btn-sm" type="button"><span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span><span class="d-none d-sm-inline-block ml-1">Export</span></button></div>
</div>
</div>
</div>
<div class="card-body px-0 py-0">
<div class="table-responsive scrollbar">
<table class="table table-sm fs--1 mb-0">
<thead class="bg-200 text-900">
<tr>
<th>
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" id="checkbox-bulk-purchases-select" type="checkbox" data-bulk-select='{"body":"table-purchase-body","actions":"table-purchases-actions","replacedElement":"table-purchases-replace-element"}' /></div>
</th>
<th class="sort pr-1 align-middle white-space-nowrap" data-sort="name">Customer</th>
<th class="sort pr-1 align-middle white-space-nowrap" data-sort="email">Email</th>
<th class="sort pr-1 align-middle white-space-nowrap" data-sort="product">Product</th>
<th class="sort pr-1 align-middle white-space-nowrap text-center" data-sort="payment">Payment</th>
<th class="sort pr-1 align-middle white-space-nowrap text-right" data-sort="amount">Amount</th>
<th class="no-sort pr-1 align-middle data-table-row-action"></th>
</tr>
</thead>
<tbody class="list" id="table-purchase-body">
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-0" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Sylvia Plath</a></th>
<td class="align-middle white-space-nowrap email">john@gmail.com</td>
<td class="align-middle white-space-nowrap product">Slick - Drag & Drop Bootstrap Generator</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$99</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown0" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown0"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-1" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Homer</a></th>
<td class="align-middle white-space-nowrap email">sylvia@mail.ru</td>
<td class="align-middle white-space-nowrap product">Bose SoundSport Wireless Headphones</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$634</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown1" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown1"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-2" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Edgar Allan Poe</a></th>
<td class="align-middle white-space-nowrap email">edgar@yahoo.com</td>
<td class="align-middle white-space-nowrap product">All-New Fire HD 8 Kids Edition Tablet</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-secondary">Blocked<span class="ml-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$199</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown2" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown2"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-3" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">William Butler Yeats</a></th>
<td class="align-middle white-space-nowrap email">william@gmail.com</td>
<td class="align-middle white-space-nowrap product">Apple iPhone XR (64GB)</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$798</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown3" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown3"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-4" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Rabindranath Tagore</a></th>
<td class="align-middle white-space-nowrap email">tagore@twitter.com</td>
<td class="align-middle white-space-nowrap product">ASUS Chromebook C202SA-YS02 11.6"</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-secondary">Blocked<span class="ml-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$318</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown4" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown4"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-5" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Emily Dickinson</a></th>
<td class="align-middle white-space-nowrap email">emily@gmail.com</td>
<td class="align-middle white-space-nowrap product">Mirari OK to Wake! Alarm Clock & Night-Light</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-warning">Pending<span class="ml-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$11</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown5" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown5"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-6" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Giovanni Boccaccio</a></th>
<td class="align-middle white-space-nowrap email">giovanni@outlook.com</td>
<td class="align-middle white-space-nowrap product">Summer Infant Contoured Changing Pad</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$31</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown6" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown6"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-7" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Oscar Wilde</a></th>
<td class="align-middle white-space-nowrap email">oscar@hotmail.com</td>
<td class="align-middle white-space-nowrap product">Munchkin 6 Piece Fork and Spoon Set</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$43</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown7" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown7"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-8" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">John Doe</a></th>
<td class="align-middle white-space-nowrap email">doe@gmail.com</td>
<td class="align-middle white-space-nowrap product">Falcon - Responsive Dashboard Template</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-success">Success<span class="ml-1 fas fa-check" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$57</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown8" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown8"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-9" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Emma Watson</a></th>
<td class="align-middle white-space-nowrap email">emma@gmail.com</td>
<td class="align-middle white-space-nowrap product">Apple iPhone XR (64GB)</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-secondary">Blocked<span class="ml-1 fas fa-ban" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$999</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown9" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown9"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
<tr class="btn-reveal-trigger">
<td class="align-middle" style="width: 28px;">
<div class="form-check mb-0 d-flex align-items-center"><input class="form-check-input" type="checkbox" id="recent-purchase-10" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle white-space-nowrap name"><a href="../pages/customer-details.html">Sylvia Plath</a></th>
<td class="align-middle white-space-nowrap email">plath@yahoo.com</td>
<td class="align-middle white-space-nowrap product">All-New Fire HD 8 Kids Edition Tablet</td>
<td class="align-middle text-center fs-0 white-space-nowrap payment"><span class="badge badge rounded-pill badge-soft-warning">Pending<span class="ml-1 fas fa-stream" data-fa-transform="shrink-2"></span></span></td>
<td class="align-middle text-right amount">$199</td>
<td class="align-middle white-space-nowrap">
<div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal float-right" type="button" id="dropdown10" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h fs--1"></span></button>
<div class="dropdown-menu dropdown-menu-right border py-2" aria-labelledby="dropdown10"><a class="dropdown-item" href="#!">View</a><a class="dropdown-item" href="#!">Edit</a><a class="dropdown-item" href="#!">Refund</a>
<div class="dropdown-divider"></div><a class="dropdown-item text-warning" href="#!">Archive</a><a class="dropdown-item text-danger" href="#!">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<div class="row align-items-center">
<div class="pagination d-none"></div>
<div class="col">
<p class="mb-0 fs--1"><span class="d-none d-sm-inline-block mr-2" data-list-info="data-list-info"> </span><span class="d-none d-sm-inline-block mr-2">— </span><a class="font-weight-semi-bold" href="#!" data-list-view="*">View all<span class="fas fa-angle-right ml-1" data-fa-transform="down-1"></span></a></p>
</div>
<div class="col-auto d-flex"><button class="btn btn-sm" type="button" data-list-pagination="prev"><span>Previous</span></button><button class="btn btn-sm px-4 ml-2" type="button" data-list-pagination="next"><span>Next</span></button></div>
</div>
</div>
</div>