Skip to content
BDT - Bootstrap Data Table - sorting, pagination and search for tables
Branch: master
Clone or download
Gutersohn i18n text #4
Latest commit 23503d0 May 27, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
css updated minified versions Nov 18, 2015
js i18n text #4 May 27, 2016
preview added preview Nov 18, 2015
.gitignore cleanup May 26, 2016
bootstrapdatatable.jquery.json changed name in jquery json Dec 15, 2014

Bootstrap Data Table

  • sorting, pagination and search for tables
  • bootstrap framework is used for the styling, in the bootstrap data table css file there are only a view lines like positioning elements
  • fontawesome arrow icons are used for sorting, you can choose the arrows you like the most


This is how the styled example look like, if you want to have a "blank" bootstrap table and style it how you like it just remove the style.css file.

How to use

Include bootstrap data table, bootstrap framework and sorting plugin & jquery to your Site

<link href="css/vendor/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/vendor/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="css/jquery.bdt.css" type="text/css" rel="stylesheet">

<script src="" type="text/javascript"></script>
<script src="js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery.sortelements.js" type="text/javascript"></script>
<script src="js/jquery.bdt.js" type="text/javascript"></script>

Turn your table into a bootstrap data table

$(document).ready( function () {

Available Options

  • pageRowCount / initial row count per page / default is 10
  • arrowDown / font awesome arrow down icon / default is "fa-angle-down"
  • arrowUp / font awesome arrow up icon / default is "fa-angle-up"

Disable sorting for several columns with the css class disable-sorting

<th class="disable-sorting">#ID</th>
You can’t perform that action at this time.