javascript - jquery 页面加载后 Tablesorter 变得不起作用-6ren

javascript - jquery 页面加载后 Tablesorter 变得不起作用

转载作者：行者123 更新时间：2023-12-02 18:21:20

我有一个具有可变刷新率的页面，并显示几个表格。 tablesorter.js 代码最初工作正常，但在第一次刷新后就不起作用了。

我尝试将 tablesorter 函数放置在每个分支的单击函数内，或者放置在整个单击函数的末尾或加载函数内-和-查看 tablesorter 的文档后，我尝试在上述所有场景中调用 $("#workstation-table").trigger("update", true) 。每次都是一样的。第一次刷新后不起作用。任何建议都会很棒。

HAML 代码(如果需要，HTML 位于底部):

.whole-page
  .container
    %h1#application-title.hero-unit
      .row-fluid
        .span1
          = image_tag "cog_logo.png"
          = image_tag "crs.png"
          Replication Server
          .span1.pull-right#refresh-label
            Refresh Rate:
            .btn-group#refresh-buttons
              %button.btn.btn-default#refresh-5-sec 5 sec
              %button.btn.btn-default#refresh-30-sec 30 sec
              %button.btn.btn-default#refresh-60-sec 60 sec
    %h2
      %small Status Dashboard
    #status-tables
      .col-md-4
        %h3 Reports
        #report-table-panel.panel
          %a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-cidne"} } CIDNE
        #collapse-cidne.uncollapse.in
          %table#report-table.table.table-striped.table-hover.table-bordered
            %thead
              %tr
                %th#table-header Source
                %th#table-header Type
                %th#table-header Count
            %tbody
            - @reports.each do |report|
              - if report[:source] == "CIDNE"
                %tr
                  %td
                    = report[:source]
                  %td
                    = report[:type]
                  %td
                    = report[:count]
        #report-table-panel.panel
          %a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-dcgs"} } DCGS
        #collapse-dcgs.uncollapse.in
          %table#report-table.table.table-striped.table-hover.table-bordered
            %thead
              %tr
                %th#table-header Source
                %th#table-header Type
                %th#table-header Count
            %tbody
              - @reports.each do |report|
                - if report[:source].blank?

                - elsif report[:source] == "DCGS"
                  %tr
                    %td
                      = report[:source]
                    %td
                      = report[:type]
                    %td
                      = report[:count]
      .col-md-5
        %h3#workstation-title Workstations
        .span-1
          #sort-instructions (click column name to sort)
        %table#workstation-table.table.table-striped.table-hover.table-bordered
          %thead
            %tr
              %th#table-header Name
              %th#table-header Downloaded
              %th#table-header Available
              %th#table-header Last Connect
          %tbody
            - @workstations.each do |workstation|
              %tr
                %td
                  = workstation[:name]
                %td
                  = workstation[:downloaded]
                %td
                  = workstation[:available]
                %td
                  = workstation[:last_connect]
      .col-md-3
        %h3 Source
        %table.table.table-striped.table-hover.table-bordered
          %tr
            %th#table-header Type
            %th#table-header Name
            %th#table-header Status
            - @data_sources.each do |data_source|
              %tr
                %td
                  = data_source[:type]
                %td
                  = data_source[:name]
                %td
                  - if data_source[:status] == "UP"
                    #service-up
                  - else
                    #service-down

JS代码:

$(document).ready(function() {

    var intervalId = window.setInterval(function(){
        $('.container').load('/dashboard/index .container');
    }, 60000);

    $("#refresh-60-sec").addClass("pressed-button");

    $("#application-title").on("click", "#refresh-buttons button", function(event) {

        var interval = 0;

        switch(event.target.id)  {
          case "refresh-5-sec" :
                interval = 5000;
                $(this).parent().children().removeClass("pressed-button");
                $(this).addClass("pressed-button");
                break;

          case "refresh-30-sec" :
              interval = 30000;
              $(this).parent().children().removeClass("pressed-button");
              $(this).addClass("pressed-button");
              break;

          case "refresh-60-sec" :
              interval = 60000;
              $(this).parent().children().removeClass("pressed-button");
              $(this).addClass("pressed-button");
              break;
        }

        if (interval != 0)
        {
            clearInterval(intervalId);
            intervalId = setInterval(function(){
                $('#status-tables').load('/dashboard/index #status-tables',
                function() {
                  $("#workstation-table").trigger("update", true)
                });
            }, interval);
        }

    });

  $("#workstation-table").tablesorter();

});

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />

  <title>Webui</title>
  <link data-turbolinks-track="true" href="/assets/application.css" media="all" rel=
  "stylesheet" type="text/css" />
  <script data-turbolinks-track="true" src="/assets/application.js" type=
  "text/javascript">
</script>
  <meta content="authenticity_token" name="csrf-param" />
  <meta content="D/VkaPDSNH5HHMazYu8dS8hcgGSIMl5rl5QS+eBnDyQ=" name="csrf-token" />
</head>

<body>
  <div class='whole-page'>
    <div class='container'>
      <h1 class='hero-unit' id='application-title'></h1>

      <div class='row-fluid'>
        <h1 class='hero-unit' id='application-title'></h1>

        <div class='span1'>
          <h1 class='hero-unit' id='application-title'><img alt="Cog logo" src=
          "/assets/cog_logo.png" /> <img alt="Crs" src="/assets/crs.png" /> Replication
          Server</h1>

          <div class='span1 pull-right' id='refresh-label'>
            <h1 class='hero-unit' id='application-title'>Refresh Rate:</h1>

            <div class='btn-group' id='refresh-buttons'>
              <h1 class='hero-unit' id='application-title'><button class=
              'btn btn-default' id='refresh-5-sec'>5 sec</button> <button class=
              'btn btn-default' id='refresh-30-sec'>30 sec</button> <button class=
              'btn btn-default' id='refresh-60-sec'>60 sec</button></h1>
            </div>
          </div>
        </div>
      </div>

      <h2><small>Status Dashboard</small></h2>

      <div id='status-tables'>
        <div class='col-md-4'>
          <h3>Reports</h3>

          <div class='panel' id='report-table-panel'>
            <a class='accordion-toggle' data-target='#collapse-cidne' data-toggle=
            'collapse'>CIDNE</a>
          </div>

          <div class='uncollapse in' id='collapse-cidne'>
            <table class='table table-striped table-hover table-bordered' id=
            'report-table'>
              <thead>
                <tr>
                  <th id='table-header'>Source</th>

                  <th id='table-header'>Type</th>

                  <th id='table-header'>Count</th>
                </tr>
              </thead>

              <tr>
                <td>CIDNE</td>

                <td>et</td>

                <td>5,070,127</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>laborum</td>

                <td>8,674,267</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>sed</td>

                <td>1,239,300</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>quos</td>

                <td>826,247</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>dolorem</td>

                <td>4,375,838</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>quos</td>

                <td>8,932,341</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>ullam</td>

                <td>2,504,480</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>et</td>

                <td>4,178,823</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>vitae</td>

                <td>3,945,054</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>vitae</td>

                <td>1,158,563</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>ipsa</td>

                <td>5,673,954</td>
              </tr>

              <tr>
                <td>CIDNE</td>

                <td>et</td>

                <td>8,947,587</td>
              </tr>
            </table>
          </div>

          <div class='panel' id='report-table-panel'>
            <a class='accordion-toggle' data-target='#collapse-dcgs' data-toggle=
            'collapse'>DCGS</a>
          </div>

          <div class='uncollapse in' id='collapse-dcgs'>
            <table class='table table-striped table-hover table-bordered' id=
            'report-table'>
              <thead>
                <tr>
                  <th id='table-header'>Source</th>

                  <th id='table-header'>Type</th>

                  <th id='table-header'>Count</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td>DCGS</td>

                  <td>Voluptates</td>

                  <td>8,549,353</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Tempore</td>

                  <td>8,611,361</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Provident</td>

                  <td>1,461,613</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Velit</td>

                  <td>3,823,704</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Velit</td>

                  <td>2,079,617</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Tempore</td>

                  <td>2,004,062</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Velit</td>

                  <td>7,906,194</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Tempore</td>

                  <td>4,367,449</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Voluptates</td>

                  <td>4,405,687</td>
                </tr>

                <tr>
                  <td>DCGS</td>

                  <td>Voluptates</td>

                  <td>6,369,859</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class='col-md-5'>
          <h3 id='workstation-title'>Workstations</h3>

          <div class='span-1'>
            <div id='sort-instructions'>
              (click column name to sort)
            </div>
          </div>

          <table class='table table-striped table-hover table-bordered' id=
          'workstation-table'>
            <thead>
              <tr>
                <th id='table-header'>Name</th>

                <th id='table-header'>Downloaded</th>

                <th id='table-header'>Available</th>

                <th id='table-header'>Last Connect</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td>repellat</td>

                <td>16,957</td>

                <td>9,681,569</td>

                <td>2013-08-25 01:59:43</td>
              </tr>

              <tr>
                <td>qui</td>

                <td>40,374</td>

                <td>4,768,666</td>

                <td>2013-07-06 02:45:04</td>
              </tr>

              <tr>
                <td>consequatur</td>

                <td>4,067</td>

                <td>4,201,935</td>

                <td>2013-07-26 21:42:00</td>
              </tr>

              <tr>
                <td>sunt</td>

                <td>11,049</td>

                <td>5,605,974</td>

                <td>2013-08-25 21:37:52</td>
              </tr>

              <tr>
                <td>accusamus</td>

                <td>1,870</td>

                <td>6,209,493</td>

                <td>2013-07-09 02:45:25</td>
              </tr>

              <tr>
                <td>voluptate</td>

                <td>40,900</td>

                <td>9,647,011</td>

                <td>2013-07-22 03:29:08</td>
              </tr>

              <tr>
                <td>sint</td>

                <td>33,815</td>

                <td>6,141,657</td>

                <td>2013-08-09 16:48:21</td>
              </tr>

              <tr>
                <td>optio</td>

                <td>22,849</td>

                <td>6,901,660</td>

                <td>2013-07-19 20:37:10</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class='col-md-3'>
          <h3>Source</h3>

          <table class='table table-striped table-hover table-bordered'>
            <tr>
              <th id='table-header'>Type</th>

              <th id='table-header'>Name</th>

              <th id='table-header'>Status</th>
            </tr>

            <tr>
              <td>CIDNE</td>

              <td>http://gaylord.biz/kayla.mraz</td>

              <td>
                <div id='service-up'></div>
              </td>
            </tr>

            <tr>
              <td>DCGS</td>

              <td>http://jenkins.org/ernest_gleichner</td>

              <td>
                <div id='service-down'></div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

最佳答案

放置:

$("#workstation-table").tablesorter();

在替换表的 .load() 调用的回调函数内。

关于javascript - jquery 页面加载后 Tablesorter 变得不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18797099/

文章推荐： javascript 哎呀。构造函数与原型(prototype)设计

tablesorter - TableSorter 中的排序不正确
tablesorter 中的奇怪行为: $(document).ready(function() { var timeInSec = function(node) { return $(nod
tablesorter - Jquery Tablesorter，按链接url而不是链接内容排序
我在使用第一列(共 4 列)中的链接的表上使用 Tablesorter。问题是，在 FF 和 Chrome 中，当通过 url 而不是链接的内容点击时，它对第一列进行排序。例如 zzz112233 a
tablesorter - 为什么我的 tablesorter 一直缓存我的旧行？
我正在使用 tablesorter 在我的一个页面上对网格进行排序。我每 10 秒进行一次 AJAX 调用以获取更新的股票信息，并相应地更新我的网格。这么多工作，但我无法让我的排序选项正确缓存。相反，
tablesorter - 使用 tablesorter 进行服务器端分页
使用 tablesorter 的分页器插件可以进行服务器端分页吗？看起来默认选项要求您一次将所有行加载到浏览器的内存中。由于我有这么多记录，这实际上是不可能的，我更愿意一次加载一页。 tablesor
tablesorter - 使用 Tablesorter+filter 的列宽
在使用 tablesorter css 默认主题时，如果我避免设置表格宽度，我会得到一个很好的表格，所有列都完美地调整为最长的字段。但是，如果我添加过滤器小部件，所有列看起来都比以前宽得多，并且有很
tablesorter - 在 jquery tablesorter 中添加过滤器数据占位符
有没有办法通过表排序器 jquery 语法添加数据占位符值，而不是添加到 th HTML 标记本身？也许使用像 filter: false 这样的 header 语法？最佳答案有五种方法可以禁用列
jquery - Tablesorter 过滤器小部件、Tablesorter 过滤器和分页问题
我正在尝试在表格上添加一些下拉过滤器以及分页。我正在使用 tableSorter 插件，即，tablesorter 进行排序，tablesorter-filter 或过滤器小部件进行过滤，并使用 ta
jquery - tablesorter-filter 和 jquery tablesorter
我正在使用https://github.com/jbritten/jquery-tablesorter-filter 、jquery 表排序器插件和 jquery 表排序器分页。当我在文档加载中加载
html - TABLESORTER - 如何在 TABLESORTER 中使第一列静态/固定？
我想给每一行编号，而不是让这些数字移动/排序。第一列 # 需要是静态的/固定的。所有其他列都可以根据需要进行排序。这可能吗？这是我的主题:
jquery tablesorter 和 tablesorter Filter 插件...它可以以某种方式对无序列表进行排序和过滤吗？
我正在使用tablesorter和tablesorterFilter插件，就此而言，tablesorterPager插件对我的数据进行排序。我有一个导航菜单，用于将内容组织到文件夹类型布局中，类似于
tablesorter - Jquery 插件相互干扰
注意:JS/Jquery noob 警报(是的，我) 以下两个插件之间似乎存在冲突: 表格排序器 (2.9.1) bootstrap-popover.js v2.2.1 这些插件可以单独使用，但放在一
css - tablesorter 不显示图标或删除图标
我已将 tablesorter() 实现到我的 gridview 中，并将其放置在无法对某些列进行排序的位置。但是，我无法在排序时显示升序和降序图标，也无法让默认图标不显示在无法排序的列上。我有以下C
jquery - Tablesorter 检测更改或更改？
我无法找到如何执行以下操作: 我想要一个顶部的计数器，显示行数和总行数，如下所示: 10/100 (不是寻呼机) 我触发什么？我在 $(document).ready() 上有一个变量像这样:var
jQuery - TableSorter 自定义解析器不工作
这是我的自定义解析器: $.tablesorter.addParser({ id: "customParser", is: function (stringValue) {
jquery - Tablesorter - 日期问题
我知道有人对此有一些疑问，但我似乎无法解决我的问题。我正在将 .csv 文件加载到表排序器中，但我的列之一是日期(2009 年 12 月 23 日)。但它们排序为 12 月 2 日、12 月 23
jquery tablesorter 并选择表标题中的所有复选框
我有一个表格，其中第一个标题列有一个“全选”复选框，还有一些简单的代码，用于在单击标题复选框时选择页面上的所有复选框。 $('#CheckAll').bind('click',function() {
jquery tablesorter 最后对空表格单元格进行排序
我有一个表格，其中有一列的数字范围约为 -10 到 10，还有一些空列。我希望表排序器始终将空列放在表的底部。即使我按升序或降序排序。像这样: -1 0 2 3 或者像这样: 3 2 0 -1
JQuery Tablesorter 清除表信息
我创建了一个jquery表，时不时需要清除并重新填充，我的清除方法是这样的: //Clear table content before repopulating values $('#table tr
jquery tablesorter ajax表只按一个方向排序
我有一个通过 jQuery 加载命令加载的表。在加载函数的回调中，我启动了表排序器插件。由于某种原因，该表仅按降序排序而不是升序排序。更奇怪的是，如果我按住shift，它会在升序和降序之间正确切换吗？
jQuery tablesorter + 调整列宽
有没有jQuery用于调整表列大小的插件，可以与 tablesorter 一起使用吗？最佳答案看起来像Flexigrid有你想要的一切。关于jQuery tablesorter + 调整列宽，我

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jquery 页面加载后 Tablesorter 变得不起作用