6 Demos of Bootstrap [3,4,5] 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.

Features

  • 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 column headers.
  • It has a 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.
  • It has a 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.

Compatible with: Bootstrap 3, Bootstrap 4, Bootstrap 5

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:

"sPaginationType": "bs_four_button"

 

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 the above example i.e.:

"sPaginationType": "bs_full"

 

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

Output:

Bootstrap data table page numbers

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

Use this script before the </body> tag:

		<script type="text/javascript">
		$(document).ready(function() {
			$('.datatable').dataTable({
				"sPaginationType": "bs_normal"
			});	
			$('.datatable').each(function(){
				var datatable = $(this);
				// SEARCH - Add the placeholder for Search and Turn this into in-line form control
				var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
				search_input.attr('placeholder', 'Search');
				search_input.addClass('form-control input-sm');
				// LENGTH - Inline-Form control
				var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
				length_sel.addClass('form-control input-sm');
			});
		});
		</script>

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

Note: Don’t forget to include jQuery and plug-in JS files as shown in the above demos.

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.

Sample Output:

Bootstrap data table next previous

A demo of changing the color of every other row

Want to add some colors in tables along with useful features? No problem, 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.

Bootstrap data table color

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:

.table-striped tbody tr:nth-child(odd) td,

.table-striped tbody tr:nth-child(odd) th {

background-color: #DFF0D8;

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, I changed the text color to white so that text is visible clearly:

Bootstrap data table odd even

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

.table-striped tbody tr:nth-child(odd) td,

.table-striped tbody tr:nth-child(odd) th {

background-color: #F2DEE0;

}



.table-striped tbody tr:nth-child(even) td,

.table-striped tbody tr:nth-child(even) th {

background-color: #8D3841;

color:#fff;

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

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

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️