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

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.