将 jQuery 表格排序器与 javascript 表格数组一起使用答案

【问题标题】：Using jQuery tablesorter with javascript table array将 jQuery 表格排序器与 javascript 表格数组一起使用
【发布时间】：2018-10-14 04:21:29
【问题描述】：

我正在尝试在我的页面加载时由 javascript 数组生成的 html 表上使用 jQuery 插件 tablesorter (tablesorter.com)。表格被设置样式，点击列标题时表格不会排序。

这是我目前所拥有的：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/external/jquery/jquery.js"></script>
  <script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.js"></script>
  <link type="text/css" rel="stylesheet" href="/lib/jquery-ui/jquery-ui-1.11.4/jquery-ui.css">

  <script type="text/javascript" src="/lib/jquery/tablesorter/jquery.tablesorter.js"></script>
  <link type="text/css" rel="stylesheet" href="/lib/jquery/tablesorter/themes/blue/style.css">
  <style>
  </style>
  <script>
    $( document ).ready( function() {
        $( "table" ).tablesorter();

        $( "p" ).click( function() {
            $( this ).hide();
        });
    });

    $( function() {
        $( "#datepicker" ).datepicker();
    });

  </script>
  <script>
    var frameData = [
      ["Phoenix Smasher", 15],
      ["Bone Breaker", 16],
      ["DeathFist", 60],
      ["Thruster", 20],
      ["S Jab", 10]
    ];

    function pageLoad() {
      var t = "";
      t += "<thead>";
      t += "<tr>";
      t += "<th>Move</th>";
      t += "<th>Start Up</th>";
      t += "</tr>";
      t += "</thead>";
      t += "<tbody>";
      for (var i = 0; i < frameData.length; i++) {
        t += "<tr>";
        t += "<td>" + frameData[i][0] + "</td><td>" + frameData[i][1] + "</td>";
        t += "</tr>";
      }
      t += "</tbody>";
      document.getElementById("frameTable").innerHTML = t;
    }
  </script>
</head>
<body onload="pageLoad()">
  <p>Click the table headers to sort the array in descending order.</p>
  <br />
  <br />
  <div id="demo"></div>
  <table id="frameTable" class="tablesorter">
  </table>

  <p>jQuery test. This text will disappear on click.</p>
  <input type="text" id="datepicker">
</body>
</html>

我尝试过的： 奇怪的是，当我摆脱 javascript 数组并将实际的 html 表数据放在 <table> 和 </table> 标记之间时，tablesorter 插件工作正常.另外，我尝试使用 jQuery 代码重新排列数组和 pageLoad() 函数，但完全没有运气。

知道如何让它工作吗？

页面在我的服务器上：http://sketchcarellz.com/multiArray.html

【问题讨论】：

这样能解决问题吗？我现在会尝试这样做。
我将所有pageLoad 和数组代码放在$( document ).ready 下，但这并没有解决问题。然后我尝试将我所有的代码放在( document ).ready 下的pageLoad 中，但这也不起作用。您的建议无助于解决我的问题。

标签： javascript jquery html arrays tablesorter

【解决方案1】：

你的问题是你在建表之前初始化插件。

切换执行顺序。为此，只需使用一个负载处理程序即可确保您知道顺序

$( document ).ready( function() {
     pageload();
    // table is build, call plugin
    $( "table" ).tablesorter();
});

【讨论】：

引擎盖下的内容远不止您在 html 中看到的内容。插件等内部缓存

【解决方案2】：

或者，您可以使用 Build Table Widget 从 JSON 创建表

确保包含构建表小部件：

<script src="@987654322@";></script>

如果你有一个值数组，你可以像这样将标题添加到第一行：

var tableData = [
  // header
  [ "Move", "Start Up"],
  // rows
  [ "Phoenix Smasher", 15],
  [ "Bone Breaker",    16],
  [ "DeathFist",       60],
  [ "Thruster",        20],
  [ "S Jab",           10]
]

然后将数组和一些参数传递给构建源选项到widgetOptions，如下所示：

$("#jsonTable").tablesorter({
  theme: 'materialize',
  widgets: ['zebra'],
  widgetOptions: {
    build_type: 'array',          // can sometimes be detected if undefined
    build_source: tableData,
    build_headers: {
      rows    : 1,                // Number of header rows from the array
      widths  : [ '70%', '20%' ]  // set header cell widths
    },
    build_footers : {
      rows    : 0,                // Number of header rows from the array
    },
  }
});

jsFiddle 和 StackSnippets 中的演示：

var tableData = [
  // header
  [ "Move" , "Start Up"],
  // rows
  [ "Phoenix Smasher", 15],
  [ "Bone Breaker", 16],
  [ "DeathFist", 60],
  [ "Thruster", 20],
  [ "S Jab", 10]
]

$("#jsonTable").tablesorter({
  theme: 'materialize',
  widgets: ['zebra'],
  widgetOptions: {
    build_type: 'array', 		 		// can sometimes be detected if undefined
    build_source: tableData,
    build_headers: {
      rows    : 1,  						 // Number of header rows from the array
      widths  : [ '70%', '20%' ] // set header cell widths
    },
    build_footers : {
      rows    : 0,  						 // Number of header rows from the array
    },
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/css/theme.materialize.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.combined.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js"></script>


<div id="jsonTable"></div>

进一步阅读：

【讨论】：