【发布时间】：2014-01-23 20:59:18
【问题描述】：
我正在尝试使用 TableSorter jQuery 插件来完全动态地构建一个表（标题和数据）。
与大多数 Web 应用程序一样，用户输入一些数据/标准，单击按钮，然后返回数据。我建立了一个表格来保存数据，用户可以对其进行排序。 我的工作正常，但是，我们决定我们需要用户能够指定他们想要的数据列以及这些列的顺序。
数据检索完成。我通过 web 方法从 aspx 页面对 aspx.vb 代码隐藏进行了 javascript/jQuery 调用。后面的代码与 DLL 交互 它将其信息传递回数据表中。我从数据表构建一个字符串以传回 javascript/jQuery 代码。在javascript中，字符串被分成一个 字符串数组。
这是我之前构建表的方式（在用户指定列和列顺序的要求之前）：
HTML：
<table id="mytable" class="tablesorter" border="1">
<thead title="Click to sort">
<tr>
<th style="color:#A7C942;" title="Click for default order"><div class="1"></div></th>
<th><div id="div1" class="2">Column2</div></th>
<th><div class="3">Column3</div></th>
<th><div class="4">Column4</div></th>
<th><div class="5">Column5</div></th>
<th><div class="6">Column6</div></th>
<th><div class="7">Column7</div></th>
<th><div class="8">Column8</div></th>
<th><div class="9">Column9</div></th>
<th><div class="10">Column10</div></th>
<th><div class="11">Column11</div></th>
<th><div class="12">Column12</div></th>
<th><div class="13">Column13</div></th>
<th><div class="14">Column14</div></th>
<th><div class="15">Column15</div></th>
<th><div class="16">Column16</div></th>
<th><div class="17">Column17</div></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Javascript：
var table = '';
for (var i = 1; i <= NumberOfRecords; i++) { //for each record
if (i % 2 == 0) { table += '<tr class="even">'; } else {
table += '<tr>';
}
table += '<td><div class="1"><img src="/resources/ic_menu_search.png" alt="" height="20" width="20" style="cursor: pointer;" id="' + i + '" ></img></div></td>';
table += '<td><div class="2">' + TableResults[((i - 1) * 459) + 1] + '</div></td>';
table += '<td><div class="3">' + TableResults[((i - 1) * 459) + 4] + '</div></td>';
table += '<td><div class="4">' + TableResults[((i - 1) * 459) + 5] + '</div></td>';
table += '<td><div class="5">' + TableResults[((i - 1) * 459) + 6] + '</div></td>';
table += '<td><div class="6">' + TableResults[((i - 1) * 459) + 9] + '</div></td>';
table += '<td><div class="7">' + "$" + TableResults[((i - 1) * 459) + 12] + ".00" + '</div></td>';
table += '<td><div class="8">' + TableResults[((i - 1) * 459) + 15] + '</div></td>';
table += '<td><div class="9">' + TableResults[((i - 1) * 459) + 16] + '</div></td>';
table += '<td><div class="10">' + TableResults[((i - 1) * 459) + 37] + '</div></td>';
table += '<td><div class="11">' + TableResults[((i - 1) * 459) + 38] + '</div></td>';
table += '<td><div class="12">' + TableResults[((i - 1) * 459) + 39] + "%" + '</div></td>';
table += '<td><div class="13">' + TableResults[((i - 1) * 459) + 45] + '</div></td>';
table += '<td><div class="14">' + TableResults[((i - 1) * 459) + 66] + '</div></td>';
table += '<td><div class="15">' + TableResults[((i - 1) * 459) + 78] + '</div></td>';
table += '<td><div class="16">' + "$" + TableResults[((i - 1) * 459) + 81] + ".00" + '</div></td>';
table += '<td><div class="17">' + TableResults[((i - 1) * 459) + 109] + '</div></td>';
table += '</tr>';
}
$('#mytable').append(table);
表格排序器：
$('#mytable').tablesorter({
theme: 'default',
widgets: ['zebra', 'reorder'],
widgetOptions: {
reorder_axis: 'x', // 'x' or 'xy'
reorder_delay: 300,
reorder_helperClass: 'tablesorter-reorder-helper',
reorder_helperBar: 'tablesorter-reorder-helper-bar',
reorder_noReorder: 'reorder-false',
reorder_blocked: 'reorder-block-left reorder-block-end',
reorder_complete: null // callback
}
})
我为每个设置了 div 类，因为标题和数据没有正确排列，因为它们是在不同时间创建的。这很好用，但由于用户需要能够确定他们看到的列和顺序，我将不得不采用不同的方法。我遇到了 为 TableSorter 构建 Table 小部件并尝试按如下方式实现它：
HTML：
<div id="mytable">
</div>
Javascript（前两列是静态的，其余的将由用户在设置屏幕上设置）：
var table = [];
table += '[ [' + ['', 'Column2', 'Column3', 'Column4', 'Column5', 'Column6', 'Column7', 'Column8', 'Column9', 'Column10', 'Column11', 'Column12', 'Column13', 'Column14', 'Column15', 'Column16', 'Column17'] + '],';
for (var i = 1; i <= NumberOfRecords; i++) { //for each record
table += '[' + [i, TableResults[((i - 1) * 459) + 1], TableResults[((i - 1) * 459) + 4], TableResults[((i - 1) * 459) + 5], TableResults[((i - 1) * 459) + 6], TableResults[((i - 1) * 459) + 9], TableResults[((i - 1) * 459) + 12], TableResults[((i - 1) * 459) + 15], TableResults[((i - 1) * 459) + 16], TableResults[((i - 1) * 459) + 37], TableResults[((i - 1) * 459) + 38], TableResults[((i - 1) * 459) + 39], TableResults[((i - 1) * 459) + 45], TableResults[((i - 1) * 459) + 66], TableResults[((i - 1) * 459) + 78], TableResults[((i - 1) * 459) + 81], TableResults[((i - 1) * 459) + 109]] + ']';
if (i != NumberOfRecords) {
table += ',';
}
}
table += '];'
表格排序器：
$('#mytable').tablesorter({
theme: 'default',
widgets: ['zebra', 'reorder', 'stickyHeaders'],//, 'resizable'],
widgetOptions: {
build_source: table,
build_headers: {
rows: 1,
classes: [],
text: [],
widths : ['3%', '8%', '7%', '7%', '7%', '7%', '6%', '7%', '7%', '7%', '7%', '7%', '7%', '7%', '6%']
}
}
})
但是，这将无济于事。如果我添加“$('#mytable').append(table);”它会附加文本，但我仍然没有表格。我已经确定了构建表的代码 小部件包含在项目中，如果我设置断点，它将在加载时被命中。
最终目标是从数据库中读取用户的列首选项（这很容易），并使用选定的列完全动态地生成表。 然后该表需要可排序，具有可重新排序的列（我也有一个 TableSorter 小部件），并且列需要可调整大小（另一个 TableSorter 小部件）。
如何即时构建此表，以实现上述目标，并使列与数据对齐？ 我究竟做错了什么？提前感谢您提供的任何帮助！
【问题讨论】：
标签： javascript jquery html tablesorter