jQuery Plugin For Sortable Bootstrap Tables - Bootstrap Sortable

File Size: 30 KB
Views Total: 24612
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Sortable Bootstrap Tables - Bootstrap Sortable

Bootstrap Sortable is a jQuery extension for Bootstrap that adds the capability of sorting rows of your Bootstrap tables by your own rules.

Features:

  • Allows to disable sorting for a specific table column.
  • Sorts table data alphabetically.
  • Sorts table data by numbers.
  • Sorts table data by dates. (Requires Momont.js).
  • Custom sorting signs.

Basic usage:

1. Add the Bootstrap Sortable plugin's JavaScript and CSS into your Bootstrap project.

<link href="bootstrap-sortable.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="bootstrap-sortable.js"></script> 

2. Add the CSS class sortable to your existing table and done.

<table class="table sortable">
  ...
</table>

3. Use the data-defaultsort='disabled' attribute to disable sorting on specific table columns.

<table class="table sortable">
  <th data-defaultsort="disabled"></th>
  ...
</table>

4. Customize the sorting signs using the data-defaultsign attribute. Available values: 'az', 'AZ', '_19', 'month'.

<table class="table sortable">
  <th data-defaultsign="AZ">First Name</th>
  ...
</table>

5. More Html data attributes.

  • data-dateformat: Specify the date format used for sorting by dates. Requies Momont.js.
  • data-value: Specify the data value to be sorted.
  • data-firstsort="desc": change the initial direction.

Change log:

2017-03-27

  • sorting table with rowspan cells

2016-10-21

  • handling of tables inside tables

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