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

Question

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?.

Answer 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>