レール付きのソート可能なブートストラップテーブル

Question

私はbootstrap-table-rails gemを使用してテーブルにソート可能な能力を作成しています。それはJSを介してテーブルのフィールドのデータを変更する場合を除いて正常に動作します。 私のコードは次のようになります。

<table data-toggle="table" class="table table-responsive"> 
    <thead> 
     <tr> 
      <th data-field="date" data-sortable="true">TITLE</th> 
      <th data-field="deadline" data-sortable="true">DEADLINE</th> 
      <th data-field="accept-job" data-sortable="true"></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Sample data</td> 
      <td>Sample data</td> 
      <td class="accept_field"><button class="btn accept_btn">Accept Job</button></td> 
     </tr> 
     <tr> 
      <td>Sample data</td> 
      <td>Sample data</td> 
      <td>Sample data</td> 
     </tr> 
    </tbody> 

基本的には、この表には、他の動的データ（deadline_field）で満たされ、そのうちの一つがダミーデータで満たされ、2行が含まれています。私はこのようなJSを介してデータを変更します。

function Timer(duration, display, deadline) { 
    var timer = duration, hours, minutes, seconds; 
    setInterval(function() { 
     hours = parseInt((timer /3600)%24, 10) 
     minutes = parseInt((timer/60)%60, 10) 
     seconds = parseInt(timer % 60, 10); 

     hours = hours < 10 ? "0" + hours : hours; 
     minutes = minutes < 10 ? "0" + minutes : minutes; 
     seconds = seconds < 10 ? "0" + seconds : seconds; 

     display.text(hours + ":" + minutes + ":" + seconds); 
     deadline.text(hours + ":" + minutes + ":" + seconds); 
     --timer; 
    }, 1000); 
}; 

$(".accept-btn").click(function() { 
    var twentyFourHours = 24 * 60 * 60; 
    // Show timer element on page 
    var display = $('.countdown').show(); 
    var deadline = $('.deadline_field'); 
    Timer(twentyFourHours, display, deadline); 
}); 

この関数は、次のん： 1.それは、24時間から時間をカウントします。 2.締め切りは他のページと表のdeadline_fieldに表示されます。うまくいきますが、テーブルをソートしようとすると、deadline_fieldの値がSample dataに変更されています。つまり、ソートはもう機能しません。 この問題について感謝します。ありがとうございます。

Answer 1

調査の時間を経て、私はsorttable.jsプラグインに切り替えることにしました。