jQuery Plugin For Bootstrap Based Data Table - Bootstrap Data Table

File Size: 613 KB
Views Total: 49960
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Bootstrap Based Data Table - Bootstrap Data Table

A small yet robust jQuery plugin that extends Bootstrap table to make a dynamic and interactive data table with support for filtering, pagination and sorting.

How to use it:

1. Include jQuery library and the jQuery Bootstrap Data Table plugin on your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.bdt.js"></script>

<link href="css/jquery.bdt.css" rel="stylesheet">

2. Include the required Bootstrap 3 framework on the page.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

3. Include the Font Awesome 4 for sorting icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

4. Include the jQuery sortElements plugin to provide basic low-level element sorting function for the data table.

<script src="js/jquery.sortelements.js"></script>

5. Call the plugin on your Bootstrap table and done.

$(document).ready( function () {
  $('#bootstrap-table').bdt();
});

6. Full options.

// initial row count per page
pageRowCount: 10,

// custom arrow down icon
arrowDown: 'fa-angle-down',

// custom arrow up icon
arrowUp: 'fa-angle-up'

This awesome jQuery plugin is developed by pguso. For more Advanced Usages, please check the demo page or visit the official website.