How to sort date when using excel-bootstrap-table-filter jQuery pluggin

I am using excel-bootstrap-table-filter jQuery pluggin to sort tables on my website. It works like a dream except when it comes to sorting date fields. I have the dates in DD MMM YYYY format.

excel-bootstrap-table-filter is sorting the table based on the DD value. Anyone knows how to get the plugin to sort dates correctly?.

1 Answers

Answers 1

As you are using this plugin so there no implementation of date filter. you need to replace FilterCollection.prototype.sort function with below code

FilterCollection.prototype.sort = function(column, order, table, options) {     var flip = 1;     if (order === options.captions.z_to_a.toLowerCase().split(' ').join('-')) flip = -1;     var tbody = $(table).find('tbody').get(0);     var rows = $(tbody).find('tr').get();     var th = $(table).find('th')[column];     var isType = th.getAttribute('istype');     var dateformat = th.getAttribute('dateformat');     rows.sort(function(a, b) {         var A = a.children[column].innerText.toUpperCase();         var B = b.children[column].innerText.toUpperCase();         if (isType == 'date') {             A = moment(A, dateformat);             B = moment(B, dateformat);             return A.diff(B, 'd') * flip;         } else if (!isNaN(Number(A)) && !isNaN(Number(B))) {             if (Number(A) < Number(B)) return -1 * flip;             if (Number(A) > Number(B)) return 1 * flip;         } else {             if (A < B) return -1 * flip;             if (A > B) return 1 * flip;         }         return 0;     });     for (var i = 0; i < rows.length; i++) {         tbody.appendChild(rows[i]);     } }; 

In this FIDDLE, I have created a demo using same plugin and I have modify the sort method with I have mentioned above code. Here I have used moment.js. I hope this will help/guide you to achieve your requirement.

Table Code

<table id="table" class="table table-bordered table-intel">     <thead>         <tr>             <th class="filter">Animal</th>             <th class="filter">Class</th>             <th class="filter">Collective Noun</th>             <th dateformat="DD MM YYYY" isType="date" class="filter">Date</th>         </tr>     </thead>     <tbody>         <tr>             <td>Bear</td>             <td>Mammal</td>             <td>Sleuth</td>             <td>11 04 2018</td>         </tr>         <tr>             <td>Ant</td>             <td>Insect</td>             <td>Army</td>             <td>11 05 2018</td>         </tr>         <tr>             <td>Salamander</td>             <td>Amphibian</td>             <td>Congress</td>             <td>11 04 2018</td>         </tr>         <tr>             <td>Owl</td>             <td>Bird</td>             <td>Parliament</td>             <td>10 04 2018</td>         </tr>         <tr>             <td>Frog</td>             <td>Amphibian</td>             <td>Army</td>             <td>1 04 2018</td>         </tr>         <tr>             <td>Shark</td>             <td>Fish</td>             <td>Gam</td>             <td>11 04 2018</td>         </tr>         <tr>             <td>Kookaburra</td>             <td>Bird</td>             <td>Cackle</td>             <td>21 04 2018</td>         </tr>         <tr>             <td>Crow</td>             <td>Bird</td>             <td>Murder</td>             <td>23 04 2018</td>         </tr>         <tr>             <td>Elephant</td>             <td>Mammal</td>             <td>Herd</td>             <td>11 03 2018</td>         </tr>         <tr>             <td>Barracude</td>             <td>Fish</td>             <td>Grist</td>             <td>30 04 2018</td>         </tr>     </tbody> </table> 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati