Щелкните ячейку и вызовите вызов ajax в Табуляторе

Question

Я вызываю API, у которого есть дочерняя коллекция, поэтому я хочу щелкнуть столбец идентификатора и запустить и показать подтаблицу

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

Кстати, setData никогда не работал у меня, он всегда возвращает недопустимый символ в позиции 12

            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)

Answer 1

Я наконец нашел решение своей проблемы. Сначала я вызывал функцию для создания таблицы в моей функции document.ready () перед вызовом ajax, а в функции успеха я установил данные в таблицу, но никогда не делал этого для дочерней таблицы. Итак, что я изменил, так это то, что я установил таблицу после вызова ajax (очень умно с моей стороны, если я мог бы добавить (сарказм)), передавая результат данных в таблицы. Спасибо @ nraburn-tech за помощь