6 demos of Bootstrap data tables with paging, rows per view and more

The data tables and Bootstrap

In the table tutorial of Bootstrap, I showed how you can create simple tables by using Bootstrap built-in classes. In this tutorial, a plug-in is used for creating data tables that have useful features like pagination, sorting, search etc.

A user may select how many rows to display at a time by selecting from the dropdown e.g. 10, 25, 50 or 100 rows. The table rows can be sorted by clicking on the columns headers. It has pagination feature as well, so if a user selects 10 rows and the table has 50 rows, the arrows will be displayed for moving next or previous. Moreover, it has search facility as well. Just enter a search term and table rows will be filtered on the fly.

At the bottom, a total count of the rows along with current numbers is also displayed. See the following examples to learn more about it.

A demo of datatable with pagination and search options

In this example, a Bootstrap data table is created with a few options like showing 10 rows initially, search, sorting option and pagination. The pagination allows moving first, last, next and previous pages. For showing “page” numbers along with these options, see next example:

Bootstrap data table

See online demo and code

Setting up the data table plug-in

This is how the Bootstrap datatable plug-in is set up.

First of all, you need to include the Bootstrap and plug-in’s CSS file in the <head> section (See the download link in credit section at the bottom):

<link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”css/datatables/datatables.css”>

Place it at the desired location.

Secondly, just above the </body> tag, place jQuery library, Bootstrap JS file, jquery.dataTables.min.js file, and this plug-in JS file:

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

<script src=”//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js”></script>

<script src=”//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js”></script>

<script src=”js/datatables/datatables.js”></script>

The reason why you need including the dataTables JS file is this plug-in uses dataTable underneath for a few features.

In the markup section, create the HTML table tag with fewer classes like datatable, table table-striped etc which is followed by creating the table headers and data.

In the <script> section, you may specify certain options like showing the paging with page numbers or just four or two buttons, searching etc. In this example, the four button option is set:

 

See the complete code on the demo page.

A demo of page numbers

In this example, only a single option is modified as compared to above example i.e.:

 

This is used in the jQuery code. The purpose is to display the page numbers along with move next, previous, first or last.

See the code and output online:

Bootstrap data table page numbers

See online demo and code

A demo of showing next, previous and numbers in datatable Bootstrap

You may also omit the first and last options by using the “sPaginationType”: “bs_normal” in the jQuery code. That is, replace the bs_full by bs_normal value:

Bootstrap data table normal

See online demo and code

You can see, the buttons are only for page numbers and for moving next or previous.

A demo with only move next and previous buttons

Finally, you may only display the Next and Previous buttons as well. This can be done by using the “sPaginationType”: “bs_two_button” option in the jQuery code.

See the code and example’s output:

Bootstrap data table next previous

See online demo and code

A demo of changing the color of every other row

Want to add some colors in tables along with useful features? No problems, you just need to change or add a few CSS properties in the existing CSS file or in the <style> section.

In this demo, the color of every other row is changed to Bootstrap’s standard success class i.e. green. See the output of this example along with code:

Bootstrap data table color

See online demo and code

For that, I just added background color for each odd row in the <style> section using the .table-striped class which is specified in the <table> tag:

Changing color of even rows in Bootstrap datatable

Not only odd rows color can be changed, but you may specify different colors for both odd and even rows. For that simply use the even in :nth-child.

Have a look at this demo and code where odd rows are given light red, the standard danger color of Bootstrap and even rows are given dark red color. Also, as it is dark colored, so I changed the text color to white so that text is visible clearly:

Bootstrap data table odd even

See online demo and code

The following CSS is used in the <style> section for even and odd rows:

Yet another useful plug-in: sticky table header plug-in

Credit for this jQuery datatable plug-in: Developer at GitHub website