0

我有一个页面,其中包含我正在排序的三个表:一个 div 中的两个报告表 ID 为report-table(不排序)和一个 ID 为workstation-table(排序)。排序的初始化是相同的代码,所以我不确定发生了什么。

JS

$(document).ready(function() {

    var intervalId = window.setInterval(function(){
        $('#status-tables').load('/dashboard/index #status-tables', function(){
          $("#workstation-table").tablesorter();
          $("#report-table").tablesorter();
        });
    }, 5000);

    var clicks = true

    $("#application-name-label").animate({
        "color": "black"
    }, 1000);

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

    $("#refresh-button").on("click", function(event) {
      var buttonGroup = $(this).next();

      if(clicks) {
        $(buttonGroup).fadeOut(
          function() {
            $(this).parent().css('padding-right', '235px');
            $(this).parent().animate({
                paddingRight: "15"
            }, 300);
            clicks = false;
          });
      } else {
          $(buttonGroup).fadeIn();
          clicks = true;
      };
    });

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

        var interval = 0;

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

          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").tablesorter();
                  $("report-table").tablesorter({sortList: [[0,1], [1,0]]});
                });
            }, interval);
        }

    });

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

});

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Webui</title>
  <link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/application.js"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA=" name="csrf-token" />
</head>
<body>

<div class='whole-page'>
  <div class='container'>
    <h1 class='hero-unit' id='application-title'>
      <div class='row-fluid'>
        <div class='span1' id='replication-server'>
          <img alt="Cog logo" src="/assets/cog_logo.png" />
          <img alt="Crs" src="/assets/crs.png" />
          Replication Server
          <div class='span1 pull-right' id='refresh-label'>
            <button class='btn' id='refresh-button'>Refresh Rate</button>
            <div class='btn-group' id='refresh-buttons'>
              <button class='btn btn-default' id='refresh-off'>Off</button>
              <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>
            </div>
          </div>
        </div>
      </div>
    </h1>
    <h2>
      <small id='application-name-label'>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>
            <tbody></tbody>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                quia
              </td>
              <td>
                1,825,301
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                adipisci
              </td>
              <td>
                6,187,231
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                dolore
              </td>
              <td>
                4,051,833
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                assumenda
              </td>
              <td>
                4,921,630
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                vero
              </td>
              <td>
                7,047,737
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                adipisci
              </td>
              <td>
                3,806,981
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                sit
              </td>
              <td>
                1,580,987
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                quae
              </td>
              <td>
                7,477,697
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                adipisci
              </td>
              <td>
                6,313,774
              </td>
            </tr>
            <tr>
              <td>
                CIDNE
              </td>
              <td>
                quidem
              </td>
              <td>
                219,960
              </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>
                  Dicta
                </td>
                <td>
                  3,816,119
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Reiciendis
                </td>
                <td>
                  1,946,655
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Dicta
                </td>
                <td>
                  4,278,956
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Reiciendis
                </td>
                <td>
                  7,676,013
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Id
                </td>
                <td>
                  1,230,434
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Id
                </td>
                <td>
                  5,415,422
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Reiciendis
                </td>
                <td>
                  2,622,098
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Dicta
                </td>
                <td>
                  6,462,915
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Reiciendis
                </td>
                <td>
                  8,797,296
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Dicta
                </td>
                <td>
                  9,564,459
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Dicta
                </td>
                <td>
                  8,010,943
                </td>
              </tr>
              <tr>
                <td>
                  DCGS
                </td>
                <td>
                  Id
                </td>
                <td>
                  524,049
                </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>
                recusandae
              </td>
              <td>
                27,035
              </td>
              <td>
                2,634,369
              </td>
              <td>
                2013-09-05 21:18:46
              </td>
            </tr>
            <tr>
              <td>
                sed
              </td>
              <td>
                49,685
              </td>
              <td>
                1,364,771
              </td>
              <td>
                2013-08-17 18:05:39
              </td>
            </tr>
            <tr>
              <td>
                in
              </td>
              <td>
                5,970
              </td>
              <td>
                985,174
              </td>
              <td>
                2013-07-16 09:57:24
              </td>
            </tr>
            <tr>
              <td>
                nihil
              </td>
              <td>
                17,907
              </td>
              <td>
                8,029,822
              </td>
              <td>
                2013-09-08 09:07:35
              </td>
            </tr>
            <tr>
              <td>
                sed
              </td>
              <td>
                42,146
              </td>
              <td>
                9,447,817
              </td>
              <td>
                2013-07-23 14:25:28
              </td>
            </tr>
            <tr>
              <td>
                facere
              </td>
              <td>
                53,008
              </td>
              <td>
                4,056,927
              </td>
              <td>
                2013-07-15 22:49:34
              </td>
            </tr>
            <tr>
              <td>
                et
              </td>
              <td>
                41,147
              </td>
              <td>
                5,211,530
              </td>
              <td>
                2013-07-18 03:52:58
              </td>
            </tr>
            <tr>
              <td>
                autem
              </td>
              <td>
                29,545
              </td>
              <td>
                3,338,005
              </td>
              <td>
                2013-09-11 06:55:50
              </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>
              <td>
                CIDNE
              </td>
              <td>
                http://abbottwaters.net/keshaun_smitham
              </td>
              <td>
                <div id='service-up'></div>
              </td>
            </tr>
            <tr>
              <td>
                DCGS
              </td>
              <td>
                http://jones.biz/ashlynn_schaden
              </td>
              <td>
                <div id='service-down'></div>
              </td>
            </tr>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>


</body>
</html>
4

1 回答 1

1

在你report-table的你tbody是空的。将所有行移入tbody,你应该会很好。

于 2013-09-17T16:28:46.380 回答