0

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

我已经尝试将 tablesorter 函数放置在每个分支的 click 函数中，或者在整个 click 函数的末尾或 load 函数中 - 并且 - 在查看 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>
4

1 回答 1

2

放：

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

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

于 2013-09-14T02:46:19.533 回答