jquery tablesorter 不适用于动态创建的表

Question

我的表格分类器不工作。它说无法读取未定义行的属性。但我不确定它为什么这么说。使用 jquery.min.js 和 jquery.tablesorter.js。 我有一个名为tickettable 的表。我设置了 class="tablesorter"。我怀疑是因为我做桌子的方式。文档说它需要一个 tbody 和 thead。但我认为我没有 tbody，我不确定如何将数据附加到 tbody。我从会话中获取数据并将其附加到表格中。

<table id="tickettable" class="tablesorter">
                            <thead>             
                            <th style="width: 300px;">TicketID</th>
                            <th style="width: 300px;">CUID</th>
                            <th style="width: 600px;">Detail</th>
                            <th style="width: 300px;">Severity</th>
                            <th style="width: 300px;">Status</th>
                        </thead>
                    <tbody>

                    </tbody>

                </table>


<script>
    function makeTicketTable() {
        var ticketBody = document.getElementById("tickettable");
        console.log("Ticket body was made.");

        <c:forEach items="${ticketArray}" var="ticket">
        console.log("Array process.");
        var tr = document.createElement('TR');
        var rowNum = document.getElementById("tickettable").rows.length;
        tr.id = "r" + (rowNum - 1);
        tr.className = "ModalD";
        tr.title = "Click to edit: " + "${ticket.ticketid}";
        ticketBody.appendChild(tr);

        console.log("Click function made.");
        var td = document.createElement('TD');
        td.appendChild(document.createTextNode("${ticket.ticketid}"));
        console.log("${ticket.ticketid}");
        tr.appendChild(td);

        var td1 = document.createElement('TD');
        td1.appendChild(document.createTextNode("${ticket.CUID}"));
        tr.appendChild(td1);

        var td2 = document.createElement('TD');
        var details = "${ticket.detail}";
        details = details.substring(0, 50) + "...";
        td2.appendChild(document.createTextNode(details));
        tr.appendChild(td2);

        var td3 = document.createElement('TD');
        td3.appendChild(document.createTextNode("${ticket.severity}"));
        tr.appendChild(td3);

        var td4 = document.createElement('TD');
        td4.appendChild(document.createTextNode("${ticket.status}"));
        tr.appendChild(td4);

        //used for details section
        var hidIn = document.createElement('INPUT');
        hidIn.id = "${ticket.ticketid}";
        hidIn.type = 'hidden';
        hidIn.value = "${ticket.detail}";
        tr.appendChild(hidIn);

        if ("${ticket.status}" == "Unassigned") {
            tr.style.backgroundColor = "#ff4444";
            tr.style.color = "#000000";
        } else if ("${ticket.status}" == "Ongoing") {
            tr.style.backgroundColor = "#ffbb33";
            tr.style.color = "#000000";
        } else if ("${ticket.status}" == "Completed") {
            tr.style.backgroundColor = "#00C851";
            tr.style.color = "#000000";
        }

        </c:forEach>

Answer 1

我一直在努力解决可能相同的问题，还有一个动态生成的表格。该表具有隐藏列。我通过添加一些 console.log 语句并找到 tablesorter.js 代码不喜欢我的表的位置来“解决”问题。我讨厌这样做，但它对我有用。

在我的表格中，我有隐藏的列。所以我有 11 列，在我的测试中只有 8 列可见。隐藏的三列是第一列和最后一列以及中间的一列。

我看到 buildParserCache 和 buildCache 使用 cells.length 来确定列数——在本例中为 11。 buildHeaders 正确地找到了 8 个可见列（不要问我如何......我没有调查）但是 buildCache 和 buildParserCache 在 11 个列上循环......所以他们在试图循环可见数据时死了。

对于我的“修复”，我只是在 buildCache 和 buildParsercache 中添加了一些代码，以便在到达错误数据时退出处理。

在 buildCache 中，我在 j-loop 的顶部添加了这个（我在这里显示了 j-loop 行）：

for (var j = 0; j < totalCells-1; ++j) {
if (typeof(JSON.stringify(parsers[j], null, 4)) == "undefined"){
break;
}

在 i-loop 顶部的 buildParserCache 中，我添加了这个（我再次显示 i 循环的顶部）：

for (var i = 0; i < l; i++) {
if (typeof $headers[i] === "undefined") {
return list;
}

Answer 2

谢谢大家。我解决了我的问题。我编辑了我的 JavaScript 代码。我将我的数据附加到 tbody。我使用了 kyyogenix 的表格分类器。之前没有排序，因为我的数据被附加到页脚。

function makeTicketTable() {
        var ticketBody = document.getElementById("tickettable");
        var tableRef = ticketBody.getElementsByTagName('tbody')[0];
        console.log("Ticket body was made.");

        <c:forEach items="${ticketArray}" var="ticket">

        console.log("Array process.");
        var tr = document.createElement('TR');
        var rowNum = document.getElementById("tickettable").rows.length;
        tr.id = "r" + (rowNum - 1);
        tr.className = "ModalD";
        tr.title = "Click to edit: " + "${ticket.ticketid}";
        tableRef.appendChild(tr);

HTML 代码。

<table id="tickettable" class="sortable">
                            <thead>             
                            <th style="width: 300px;">TicketID</th>
                            <th style="width: 300px;">CUID</th>
                            <th style="width: 600px;">Detail</th>
                            <th style="width: 300px;">Severity</th>
                            <th style="width: 300px;">Status</th>
                        </thead>
                    <tbody>

                    </tbody>

                </table>