CODEWITHSUNDEEP
javascripthtml
codec
codec

Reputation: 8826

How to add pagination and search on bootstrap table

I am trying to render a table using the following code in my javascript:

$('#actionTable').bootstrapTable({
                //Assigning data to table
                data: serviceDetails.actions
            });
}

Here is my table definition on HTML

    <table id="actionTable" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th data-field="service_type">Action</th>
                <th data-field="resolution_url" data-formatter="LinkFormatter">Endpoint URL</th>
            </tr>
        </thead>
    </table>

The table renders as expected I wanted to add a search box at the top and pagination at the bottom how can we achieve this. What is the official documentation for bootstrapTable which can be followed for reference?

Upvotes: 0

Views: 8818

Answers (2)

Sebastian
Sebastian

Reputation: 21

In SB Admin 2 Bootstrap 3 Theme, for displaying advanced and responsive tables, DataTables for jQuery plugin was used. From SB Admin 2 website:

DataTables is a very flexible, advanced tables plugin for jQuery. In SB Admin, we are using a specialized version of DataTables built for Bootstrap 3. We have also customized the table headings to use Font Awesome icons in place of images. For complete documentation on DataTables, visit their website at https://datatables.net/.

SB Admin 2 Theme: https://startbootstrap.com/template-overviews/sb-admin-2/
DataTable live example: https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/tables.html

For my project, I applied DataTable from SB Admin theme in the following way:

Create <table> with width="100%" for responsive behavor and optionally some CSS classes

<table width="100%" class="table table-striped table-bordered table-hover" id="actionTable">

Include CSS stylesheets in header: dataTables.bootstrap.css and optionally dataTables.responsive.css

<!-- DataTables CSS -->
<link href="dataTables.bootstrap.css" rel="stylesheet">

<!-- DataTables Responsive CSS -->
<link href="dataTables.responsive.css" rel="stylesheet">

Include JS scripts at the bottom of the <body> block: jquery.dataTables.min.js and optionally dataTables.bootstrap.js and dataTables.responsive.js:

<script src="jquery.dataTables.min.js"></script>
<script src="dataTables.bootstrap.min.js"></script>
<script src="dataTables.responsive.js"></script>

Execute DataTable script for your table in $(document).ready. If you included optional scripts and stylesheets, set responsive to true:

<script>
    $(document).ready(function() {
      $('#actionTable').DataTable({
        responsive: true
      });
    });
</script>

In the end, you should get table fitting your requirements: search box at the top and pagination at bottom + column sorting and page size select box.

The disatvantage of using DataTable is the necessity of loading all data at once, so if you want to display big data, that may slow down rendering. It is possible to make a "server-side" version of pagination by using jQuery.ajax() to get content of selected page and replacing table content by using jQuery.

Upvotes: 1

Adam Donatelli
Adam Donatelli

Reputation: 103

You can use the table I use which includes pagination and a search input that will filter the table down to what you search. If you want bootstrap styling, just link to your bootstrap css file in your header and include the table classes into your table.

Here is the repo: https://github.com/psychatelli/dynamic-table-pagination-search

Upvotes: 0

Related Questions