如何在javascript表数组中使用jQuery表orter?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (73)

我试图在我的页面加载时由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插件工作正常。此外,我尝试pageLoad()使用jQuery代码重新安排数组和函数,没有运气。

知道如何让这个工作吗?

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

提问于
用户回答回答于

可以使用Build Table Widget从JSON 创建表

确保包含构建表小部件:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/widgets/widget-build-table.min.js";></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>

进一步阅读

热门问答

php发送smtp邮件失败,请帮忙看是腾讯云不支持端口25么?

SQL GM热爱数据库的小工匠
推荐
腾讯云默认限制 TCP:25 端口,支持解封,但是有注意事项: 仅支持解封预付费包年包月的云服务器,暂不支持按量付费的云服务器。 每个腾讯云账号仅可解封5个实例。 请确保 TCP 25端口仅用于连接第三方 SMTP 服务器,并从第三方 SMTP 服务器外发邮件。如发现您直接通过云...... 展开详请

设置了云函数环境变量TZ 为 asia/shanghai,云函数端仍是0时区日期,为何不生效?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐
设置 TZ=Asia/Shanghai 可以获取到北京时间 image.png image.png image.png ... 展开详请

怎么关闭域名隐私保护?

推荐
根据 ICANN 《通用顶级域名注册数据临时政策细则(Temporary Specification for gTLD Registration Data)》和欧盟《通用数据保护条例》合规要求,腾讯云域名信息(WHOIS)查询结果中将不再展示域名所有者、所有者联系邮箱等信息。鉴于...... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

怎样实现PDF文件在线浏览?

幻象丛林RESTful 服务开发者
推荐
一般浏览器自带pdf浏览,比如谷歌浏览器,你打开pdf结尾的文件就是浏览界面。 存放在cos中的pdf文件打开如果是直接下载的话,需要设置静态网站,才能正常访问存储桶中的文件,而不是直接下载。 开启静态网站配置后,您需要使用静态网站域名访问 COS 源站才能生效,如果使用 COS...... 展开详请

扫码关注云+社区

领取腾讯云代金券