Question

我正在尝试使用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);

的tablesorter：

$('#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构建表小部件并尝试按如下方式实现它：

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 += '];'

的tablesorter：

   $('#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小部件）。

如何动态构建此表，能够实现上述目标，并使列与数据对齐？我究竟做错了什么？提前感谢您提供的任何帮助！

Answer 1

对我而言，表格的tbody似乎需要定位。

好吧，似乎$('#mytable')实际上是针对一个表格元素;由于javascript没有thead或tbody元素，因此附加代码应如下所示：

$('#mytable tbody').append(table);

对于用户构建的修改标头，我没有看到上面的代码。

如果要使用构建窗口小部件，上面的table数组应该包含行数组的数组，目前它正在构建一个包含一个大字符串的数组。试试这个（未经测试）：

var table = [];
table.push(['', '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.push([
        '<div class="1"><img src="/resources/ic_menu_search.png" alt="" height="20" width="20" style="cursor: pointer;" id="' + i + '" ></div>',
        '<div class="2">' + TableResults[((i - 1) * 459) + 1] + '</div>',
        '<div class="3">' + TableResults[((i - 1) * 459) + 4] + '</div>',
        '<div class="4">' + TableResults[((i - 1) * 459) + 5] + '</div>',
        '<div class="5">' + TableResults[((i - 1) * 459) + 6] + '</div>',
        '<div class="6">' + TableResults[((i - 1) * 459) + 9] + '</div>',
        '<div class="7">$' + TableResults[((i - 1) * 459) + 12] + '.00</div>',
        '<div class="8">' + TableResults[((i - 1) * 459) + 15] + '</div>',
        '<div class="9">' + TableResults[((i - 1) * 459) + 16] + '</div>',
        '<div class="10">' + TableResults[((i - 1) * 459) + 37] + '</div>',
        '<div class="11">' + TableResults[((i - 1) * 459) + 38] + '</div>',
        '<div class="12">' + TableResults[((i - 1) * 459) + 39] + '%</div>',
        '<div class="13">' + TableResults[((i - 1) * 459) + 45] + '</div>',
        '<div class="14">' + TableResults[((i - 1) * 459) + 66] + '</div>',
        '<div class="15">' + TableResults[((i - 1) * 459) + 78] + '</div>',
        '<div class="16">$' + TableResults[((i - 1) * 459) + 81] + '.00</div>',
        '<div class="17">' + TableResults[((i - 1) * 459) + 109] + '</div>'
    ]);
}

$('#myTable').tablesorter({
    theme: 'default',
    widgets: ['zebra', 'stickyHeaders'],
    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%']
        },
        build_footers : {
            rows    : 0
        }
    }
});

最后，我不建议使用重新排序小部件，因为它仍处于测试阶段，并且在生产就绪之前有一些未解决的问题。如果您需要在列更改后添加，删除或更新表，请使用updateAll option。

尝试使用Tablesorter完全动态构建表

1 个答案: