Comment trier les dates en utilisant le plugin jQuery excel-bootstrap-table-filter ?

Question

J'utilise excel-bootstrap-table-filter Plugin jQuery pour trier les tableaux sur mon site web. Il fonctionne à merveille, sauf lorsqu'il s'agit de trier des champs de date. J'ai les dates dans DD MMM YYYY format.

excel-bootstrap-table-filter trie le tableau en se basant sur l'attribut DD valeur. Quelqu'un sait comment faire pour que le plugin trie les dates correctement ?

Answer 1

Comme vous utilisez ce plugin il n'y a donc pas d'implémentation de date vous devez remplacer le filtre FilterCollection.prototype.sort avec le code suivant

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]);
    }
};

Dans ce FIDDLE J'ai créé une démo en utilisant le même plugin et j'ai modifié la méthode de tri avec le code ci-dessus. Ici, j'ai utilisé moment.js . J'espère que cela vous aidera/guidera pour répondre à vos besoins.

Code de la table

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