| $("#toDate") === '...

Question

I finally found the solution to my problem. At first, I was calling a function to create the table in my document.ready() function before doing the ajax call and in the success function, I set the data to the table but never did so for the child table. So what I've changed is I set up the table after the ajax call (very clever from my part if I might add (sarcasm)) passing the data result to the tables.Thanks, @nraburn-tech for your help

                var toDate = $("#toDate").val() === '' || $("#toDate") === 'undefined' ? '0001-01-01' : $("#toDate").val()
                var userGroup = $("#selectUserGroup").children("option selected") === 'undefined' ? '' : $("#selectUserGroup").children("option selected").val()
                var tokenName = $("#selectToken").children("option selected") === 'undefined' ? '' : $("#selectToken").children("option selected").val()
                var payload = {
                    "From": fromDate,
                    "To": toDate,
                    "UserGroup": userGroup,
                    "TokenName": tokenName
                };
                $.ajax({
                    type: "POST",
                    url: "FPList.aspx" + '/GetAuditReports',
                    data: JSON.stringify({
                        payload
                    }),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (data) {
                        table.addData(data.d[0]);
                    },
                    failure: function (jqHR, status, error) {
                        alert("Status: " + jqHR.status + " Error: " + error);
                    }
                });

我正在调用一个有子集合的API，所以我想在ID列中点击并触发并显示子表。

            function getAuditReports() {
                var fromDate = $("#fromDate").val() === '' || $("#fromDate") === 'undefined' ? '0001-01-01' : $("#fromDate").val();
                var toDate = $("#toDate").val() === '' || $("#toDate") === 'undefined' ? '0001-01-01' : $("#toDate").val()
                var userGroup = $("#selectUserGroup").children("option selected") === 'undefined' ? '' : $("#selectUserGroup").children("option selected").val()
                var tokenName = $("#selectToken").children("option selected") === 'undefined' ? '' : $("#selectToken").children("option selected").val()
                var payload = {
                    "From": fromDate,
                    "To": toDate,
                    "UserGroup": userGroup,
                    "TokenName": tokenName
                };
                $.ajax({
                    type: "POST",
                    url: "FPList.aspx" + '/GetAuditReports',
                    data: JSON.stringify({
                        payload
                    }),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (data) {
                        table.addData(data.d[0]);
                    },
                    failure: function (jqHR, status, error) {
                        alert("Status: " + jqHR.status + " Error: " + error);
                    }
                });
                //table.setData("FPList.aspx/GetAuditReports", encodeURI(JSON.stringify({ payload })));
            }

        function setTable() {
            table = new Tabulator("#auditReports-Table", {
                ajaxConfig: "GET",
                layout: "fitDataFill",
                ajaxContentType: "json",
                placeholder: "No data to show",
                autoColumns: true,
                dataTree: true,
                dataTreeStartExpanded: true,
                dataTreeChildField: "childRows",
                columns: [
                    { title: "Audit Id", field: "TokenAuditId", sorter: "number", responsive: 0, width: 200 },
                    { title: "Audit Status", field: "AuditStatus", sorter: "string", width: 200 },
                    { title: "Begin Date", field: "BeginDate", sorter: "datetime", width: 200 },
                    { title: "EndDate", field: "EndDate", sorter: "date", width: 200 },
                    { title: "Details", field:"", width:200}
                ],
                rowClick: function (e, row) {
                    if (row.getIndex() != 0) {
                        return;
                    }
                    var container = document.createElement("div");
                    var tableDetail = document.createElement("div");

                    container.style.boxSizing = "border-box";
                    container.style.padding = "10px, 30px, 10px, 10px";
                    container.style.borderTop = "1px solid #333";
                    container.style.borderBottom = "1px solid #333";
                    container.style.background = "#ddd";

                    tableDetail.style.border = "1px solid #333";
                    container.appendChild(tableDetail);
                    row.getElement().appendChild(container);

                    var subTable = new Tabulator(tableDetail, {
                        layout: "firColumns",
                        data: row.getData().TokenAuditId,
                        autoColumns: true,
                    })
                },
            });
        }
Probably you were referring to this response: tabulator.min.js:4 Uncaught (in promise) TypeError: this.options.data.slice is not a function
    at e.u._clearObjectPointers (tabulator.min.js:4)
    at e.u._create (tabulator.min.js:4)
    at new e (tabulator.min.js:4)
    at Object.rowFormatter (FPList.aspx?lst=AuditReport:648)
    at r.initialize (tabulator.min.js:4)
    at n._virtualRenderFill (tabulator.min.js:3)
    at n.reRenderInPosition (tabulator.min.js:3)
    at tabulator.min.js:3
    at new Promise (<anonymous>)
    at n.addRows (tabulator.min.js:3)

另外，setData从来没有为我工作过，它总是在第12位返回一个无效的字符。

Answer 1

我正在调用一个有子集合的API，所以我想在ID列中点击并触发并显示子表 var toDate = $("#toDate").val() ===''