jquery - 使用 excel-bootstrap-table-filter jQuery 插件时如何对日期进行排序

Question

我正在使用excel-bootstrap-table-filter用于对我的网站上的表格进行排序的 jQuery 插件。除了对日期字段进行排序之外，它就像一个梦想。我的日期采用 DD MMM YYYY 格式。

excel-bootstrap-table-filter 根据 DD 值对表进行排序。有人知道如何让插件正确排序日期吗？

Answer 1

当你使用这个plugin时所以没有实现date过滤器。您需要用以下代码替换 FilterCollection.prototype.sort 函数

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

在此FIDDLE ，我使用相同的插件创建了一个演示，并使用上面提到的代码修改了排序方法。这里我用了moment.js 。我希望这将帮助/指导您实现您的要求。

表代码

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