Question

在创建表格时，如果日期是过去，我试图隐藏表格的一行。感谢您的帮助！不幸的是，我无法弄清楚如何做到这一点，并且真的可以使用帮助。我还根据用户下拉列表应用了一个过滤器。我正在使用制表符包以及日期库的时刻

    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>

<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/materialize/tabulator_materialize.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<select id="filter-value">
    <option value="">Select A Course</option>
    <option value="">All</option>
    <option value="Bronze">Bronze</option>
    <option value="FirstAid">First Aid</option>
</select>

<script language="JavaScript">

//Define variables for input elements
var valueEl = document.getElementById("filter-value");

//Trigger setFilter function with correct parameters
function updateFilter() {

    valueEl.disabled = false;

    table.setFilter("course", "starts", valueEl.value);
    // table.setFilter(filter, typeVal, valueEl.value);
    // table.setFilter(filter, "like", valueEl.value);

}

//Update filters on value change
//document.getElementById("filter-field").addEventListener("change", updateFilter);
//document.getElementById("filter-type").addEventListener("change", updateFilter);
document.getElementById("filter-value").addEventListener("change", updateFilter);



//define some sample data
var tabledata = [
    { sortorder: "A100001", course: "Bronze Medallion with Emergency First Aid & CPR B Crash Course", price: "12", startdate: "Jan 21 2023" },
    { sortorder: "B300001", course: "Bronze Cross", price: "13", startdate: "May 12 1982", info: "Apr 4-May 2nd,<br /> 10am-4pm", pre: "" },
    { sortorder: "B300001", course: "Bronze Cross", price: "12", startdate: "Apr 12 1983", info: "", pre: "" },
    { sortorder: "C400001", course: "Christine Lobowski", price: "42", startdate: "May 22 1982", info: "", pre: "" },
    { sortorder: "A200001", course: "Bronze Medallion Recertification", price: "125", startdate: "Jan 8 1980", info: "", pre: "" },
    { sortorder: "D500001", course: "Margret Marmajuke", price: "16", startdate: "Jan 31 1999", info: "", pre: "" },
];

//create Tabulator on DOM element with id "example-table" RENDER THE TABLE
var table = new Tabulator("#example-table", {
    height: 605, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
    data: tabledata, //assign data to table
    layout: "fitDataFill",
    groupBy: "course",
    resizableColumns: false,
    responsiveLayout: "collapse",
    responsiveLayoutCollapseStartOpen: false,
    columns: [ //Define Table Columns
        { formatter: "responsiveCollapse", width: 30, minWidth: 30, hozAlign: "center", resizable: false, headerSort: false },
        { title: "Sort Order", field: "sortorder" },
        { title: "Course", field: "course", width: 350, responsive: 0, headerSort: false },
        { title: "Price", field: "price", hozAlign: "left", headerSort: false },
        { title: "Start Date", field: "startdate", hozAlign: "center", headerSort: false, sorter: "date", cssClass:"date" },
        { title: "Course Information", field: "info", formatter: "html", headerSort: false },
        { title: "Pre-requisites", field: "pre", headerSort: false },
    ],
    initialSort: [

        { column: "startdate", dir: "asc" }, //sort by this first asc desc
        { column: "sortorder", dir: "asc" }, //sort by this second you will see this on screen

    ],
    
    initialFilter: [
        { field: "startdate", type: ">", value: "" }
    ],

});

Answer 1

您正在比较字符串。我认为任何字符串都是 '> ""'（或者相反，没有字符串是 '> ""' - 无论哪种方式，你都不会得到你想要的）

将这些日期转换为 moment()'s（在数据插入时使用 mutator 可能是最好的），然后使用日期时间格式化程序以您想要的方式显示它们，您将能够比较/过滤/将它们正确排序为数字

制表器自定义日期过滤器

1 个答案: