4 Demos of a jQuery / Bootstrap data table plug-in

The Bootstrap data table with pagination and searching

In this tutorial, a jQuery based plug-in that supports the Bootstrap framework is shared that enables converting an ordinary HTML table into a data table.

The datatable plug-in has the following features:

  • Sorting: As you click on any column header, the table will be sorted on that basis.
  • Pagination: The default value set for the number of rows per page is 10. If rows are more than 10, this Bootstrap data table plug-in will take it to the second page and so on. You may change the row count per page by using the jQuery code as shown in a demo below.
  • Searching: If enabled by using the jQuery code, a user may search the table data for certain column.

The Bootstrap framework is used for styling the table that you may change as per the need of your website. See the demos in the following section to see how this data table plug-in looks along with learning how you may download and configure for your website.

A demo of Bootstrap / jQuery data table

In this demo, an HTML table is converted to a data table without search and number of rows options. On the bottom, you can see the pagination, have a look:

jQuery data tables

See online demo and code

In the markup section, you can see an HTML table is created with a few Bootstrap CSS classes. Only two CSS classes are used i.e. table and table-hover.

The following jQuery code is used to initiate the data table with paging:

You can see, the searching and rows per page are hidden by setting the ‘0’ value for both options.

A demo with searching option

The same markup is used as in the above example, except the value for the showEntriesPerPageField which is set as 1 i.e. true.true.

Try by entering different search terms for the first name column:

Bootstrap data tables searching

See online demo and code

The script for this demo:

 

A demo with search and rows per page options

In this demo, a user may also select how many rows to display per page. This is set by using the showEntriesPerPageField option in the jQuery code. A dropdown will display for selecting the rows to be displayed:

Bootstrap data tables rows

See online demo and code

The script:

 

An example of disabling sorting for certain columns

You may require disabling the sorting of certain columns unlike all columns in above examples. For that, simply add a class “disable-sorting” in the table heading tag. See this demo where I have disabled the sorting for username and last name columns in the table:

See online demo and code

You saw the columns are not clickable where this class is added:

How to set up jQuery/Bootstrap based datatable plug-in?

First of all, download the plug-in from this link (in GitHub website). You may also get the plug-in files by view source the demo pages.

Step 1:

Basically, you need only the plug-in’s JS file (jquery.bdt.min.js or jquery.bdt.js) besides the jQuery file. As the table is styled with Bootstrap CSS, it is also required including the CSS reference.

<script src=”http://code.jquery.com/jquery-2.1.1.min.js” type=”text/javascript”></script>

<script src=”js/bdt/jquery.bdt.min.js” type=”text/javascript”></script>

Step 2:

You may see other optional CSS files in the <head> section as well that are not mandatory.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>

<link href=’https://fonts.googleapis.com/css?family=Open+Sans:400,300,600′ rel=’stylesheet’ type=’text/css’>

<link href=”css/bdt/jquery.bdt.css” type=”text/css” rel=”stylesheet”>

Step 3:

Write the markup that includes the HTML table that you need to convert into the data table.

Step 4:

Initiate the plug-in with required options as shown in above demos.