admin管理员组

文章数量:1355612

This is a standalone html. The tabulator can be shown. But, the OrderDate column sorting cannot be activated. I tried to set different date format, for example "2025/03/24", it is still not working. The other two string sort works.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator Table</title>
    <link href="/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
    <script src="/[email protected]/dist/js/tabulator.min.js"></script>
    <script src="/[email protected]/build/global/luxon.min.js"></script>
  </head>
<body>
    <button id="fetch-data-btn">Load Data3</button>
    <div id="searchTable"></div>
<script>
    document.getElementById("fetch-data-btn").addEventListener("click", function () {
        searchIt();
    });
    const data3 = [
      {DocNum:"IN100858",OrderDate:"03/19/2025",Status:"Invoice"},
      {DocNum:"IN100857",OrderDate:"03/18/2025",Status:"Void"},
      {DocNum:"IN100859",OrderDate:"03/20/2025",Status:"Invoice"},
    ]
    function searchIt() {
      populate (data3)
    }
    function populate(data) {
        const searchNewTabulatorColumns = defineColumns();
        let table = new Tabulator("#searchTable", {
            data: data,
            layout: "fitColumns",
            columnDefaults: {
                minWidth: 70,
                headerSort: false,
            },
            columns: searchNewTabulatorColumns,
        });
    }
    function defineColumns() {
        return [
            { title: "No.", field: "DocNum", sorter: "string", headerSort: true },
            { title: "Date", field: "OrderDate", sorter: "date", headerSort: true,sorterParams:{format:"MM/DD/YY"} },
            { title: "Status", field: "Status", sorter: "string", headerSort: true }
        ];
    };
</script>
</body>
</html>

This is a standalone html. The tabulator can be shown. But, the OrderDate column sorting cannot be activated. I tried to set different date format, for example "2025/03/24", it is still not working. The other two string sort works.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabulator Table</title>
    <link href="https://unpkg/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
    <script src="https://unpkg/[email protected]/dist/js/tabulator.min.js"></script>
    <script src="https://cdn.jsdelivr/npm/[email protected]/build/global/luxon.min.js"></script>
  </head>
<body>
    <button id="fetch-data-btn">Load Data3</button>
    <div id="searchTable"></div>
<script>
    document.getElementById("fetch-data-btn").addEventListener("click", function () {
        searchIt();
    });
    const data3 = [
      {DocNum:"IN100858",OrderDate:"03/19/2025",Status:"Invoice"},
      {DocNum:"IN100857",OrderDate:"03/18/2025",Status:"Void"},
      {DocNum:"IN100859",OrderDate:"03/20/2025",Status:"Invoice"},
    ]
    function searchIt() {
      populate (data3)
    }
    function populate(data) {
        const searchNewTabulatorColumns = defineColumns();
        let table = new Tabulator("#searchTable", {
            data: data,
            layout: "fitColumns",
            columnDefaults: {
                minWidth: 70,
                headerSort: false,
            },
            columns: searchNewTabulatorColumns,
        });
    }
    function defineColumns() {
        return [
            { title: "No.", field: "DocNum", sorter: "string", headerSort: true },
            { title: "Date", field: "OrderDate", sorter: "date", headerSort: true,sorterParams:{format:"MM/DD/YY"} },
            { title: "Status", field: "Status", sorter: "string", headerSort: true }
        ];
    };
</script>
</body>
</html>
  • tabulator
Share Improve this question asked Mar 30 at 13:56 YellowLarryYellowLarry 4311 gold badge5 silver badges18 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

Solve problem. Date format should be "MM/dd/yy", not "MM/DD/YY"

本文标签： Tabulator 54 date column sorting not workingStack Overflow

版权声明：本文标题：Tabulator 5.4 date column sorting not working - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743986852a2571423.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。