jquery table分拣机无法处理动态创建的 table
jquery tablesorter not working on a dyanamically created table
我的 table 分拣机不工作。它说无法读取 属性 未定义的行。但我不确定为什么会这样说。使用 jquery.min.js 和 jquery.tablesorter.js。
我有一张 table 的票 table。我设置了class="tablesorter"。我怀疑是因为我制作 table 的方式。文档说它需要一个 tbody 和 thead。但我想我没有 tbody,我不确定如何将数据附加到 tbody。我从会话中获取数据并将其附加到 table.
<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>
我一直在为同样的问题而苦苦挣扎,还有一个动态生成的 table。 table 有隐藏的列。我通过添加一些 console.log 语句并找到 tablesorter.js 代码不喜欢我的 table 的地方来解决 'fixed' 问题。我讨厌那样做,但它对我有用。
在我的 table 中,我隐藏了专栏。所以我有 11 列,在我的测试中只有 8 列可见。隐藏的三个是第一列和最后一列以及中间的一个。
我看到 buildParserCache 和 buildCache 使用 cells.length 来确定列数 -- 在本例中为 11。 buildHeaders 正确地找到了 8 个可见列(不要问我如何......我没有调查)但是 buildCache 和 buildParserCache 在 11 列上循环......所以他们死于试图在可见数据上循环。
对于我的'fix',我只是向 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;
}
谢谢大家。我解决了我的问题。我编辑了 JavaScript 代码。我将我的数据附加到 tbody。我使用了 kyyogenix 的 table 分拣机。它之前没有排序,因为我的数据被附加到页脚。
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>
我的 table 分拣机不工作。它说无法读取 属性 未定义的行。但我不确定为什么会这样说。使用 jquery.min.js 和 jquery.tablesorter.js。 我有一张 table 的票 table。我设置了class="tablesorter"。我怀疑是因为我制作 table 的方式。文档说它需要一个 tbody 和 thead。但我想我没有 tbody,我不确定如何将数据附加到 tbody。我从会话中获取数据并将其附加到 table.
<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>
我一直在为同样的问题而苦苦挣扎,还有一个动态生成的 table。 table 有隐藏的列。我通过添加一些 console.log 语句并找到 tablesorter.js 代码不喜欢我的 table 的地方来解决 'fixed' 问题。我讨厌那样做,但它对我有用。
在我的 table 中,我隐藏了专栏。所以我有 11 列,在我的测试中只有 8 列可见。隐藏的三个是第一列和最后一列以及中间的一个。
我看到 buildParserCache 和 buildCache 使用 cells.length 来确定列数 -- 在本例中为 11。 buildHeaders 正确地找到了 8 个可见列(不要问我如何......我没有调查)但是 buildCache 和 buildParserCache 在 11 列上循环......所以他们死于试图在可见数据上循环。
对于我的'fix',我只是向 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;
}
谢谢大家。我解决了我的问题。我编辑了 JavaScript 代码。我将我的数据附加到 tbody。我使用了 kyyogenix 的 table 分拣机。它之前没有排序,因为我的数据被附加到页脚。
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>