Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make table being capable of sorting with Twitter Bootstrap?

I want to know how can I make my table being capable of sorting with Twitter Bootstrap? What are the things to be considered?

like image 912
Brained Washed Avatar asked Sep 29 '12 07:09

Brained Washed


People also ask

How do I make a table sortable?

How to Make Sortable Tables. Adding the "sortable" class to a <table> element provides support for sorting by column value. Clicking the column headers will sort the table rows by that column's value. Tables must use <thead> and <th> tags for sortable functionality to work.

Is twitter bootstrap responsive?

With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.


1 Answers

There is a library that provides the capability of sorting with bootstrap tables.

Here's a quick demonstration of how to use it.

HTML:

<table class="table table-bordered table-striped sortable">
   <thead>
      <tr>
      <th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1">
       Date
      </th>
      </tr>
   </thead>
   <tbody>
     <tr>
        <td data-dateformat="D-M-YYYY">16.4.2004</td>
     </tr>
     <tr>
        <td data-dateformat="D-M-YYYY">6.7.2002</td>
     </tr>
     <tr>
        <td data-dateformat="D-M-YYYY">4.4.2004</td>
     </tr>
     <tr>
        <td data-dateformat="D-M-YYYY">6.6.2012</td>
     </tr>
   </tbody>
</table> 

JS:

(function () {
    var $table = $('table');
    $table.on('sorted', function () {
        console.log("Table was sorted.");
    });
}());

HTH.

like image 65
ranjithnori Avatar answered Sep 22 '22 21:09

ranjithnori