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

Question

我正在使用excel-bootstrap-table-filter jQuery 插件在我的网站上对表格进行排序。 它的效果非常好，但是当涉及到日期字段的排序时就出现了问题。 我的日期格式为DD MMM YYYY。

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

- Sheils

Answer 1

由于您正在使用此插件，所以没有实现日期过滤器。 您需要将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>

- Narendra Jadhav

---

谢谢Jadhav，它很好地工作了，表格按日期排序如预期。我没有使用类过滤器，保留了我的原始类，它仍然有效。但是，在下拉菜单中，日期未正确排序。也很好让它正确排序，以便用户更轻松地选择日期间隔。还要感谢你关于集体动物名称的课程。 - Sheils

@Narendra，请在日期列的相应下拉菜单中添加类似Excel的日期格式，以便按年、月或日选择数据，如此链接所述。请参阅图片。如何在日期列上应用年、月和日的Excel筛选格式。https://github.com/chestercharles/excel-bootstrap-table-filter/issues/43 - Zia Ur Rahman