2016-07-30 10 views
1

同時にテーブルをソートしたいが、同時にナンバリングカラムを移動させたくない代わりに、他のカラムが動いている間は固定したままにする。私はそれがテーブルをソートして1つのカラムを移動しないようにする

$(document).ready(function() { 
 
    $("#myTable").tablesorter({ 
 
     // pass the headers argument and assing a object 
 
     headers: { 
 
      // assign the first column not to sort 
 
      
 
      0: { 
 
       // disable it by setting the property sorter to false 
 
       sorter: false 
 
      }, 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' /> 
 
<table id='myTable' cellspacing="1" class="tablesorter-blue">    
 
    <thead> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>last name</th> 
 
      <th>age</th> 
 
      <th>total</th> 
 
      <th>discount</th> 
 
      <th>date</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>parker</td> 
 
      <td>28</td> 
 
      <td>$9.99</td> 
 
      <td>20%</td> 
 
      <td>jul 6, 2006 8:14 am</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>hood</td> 
 
      <td>33</td> 
 
      <td>$19.99</td> 
 
      <td>25%</td> 
 
      <td>dec 10, 2002 5:14 am</td> 
 
     </tr> 
 
     <tr> 
 
      <td>3</td> 
 
      <td>kent</td> 
 
      <td>18</td> 
 
      <td>$15.89</td> 
 
      <td>44%</td> 
 
      <td>jan 12, 2003 11:14 am</td> 
 
     </tr> 
 
     <tr> 
 
      <td>4</td> 
 
      <td>almighty</td> 
 
      <td>45</td> 
 
      <td>$153.19</td> 
 
      <td>44%</td> 
 
      <td>jan 18, 2001 9:12 am</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>evans</td> 
 
      <td>22</td> 
 
      <td>$13.19</td> 
 
      <td>11%</td> 
 
      <td>jan 18, 2007 9:12 am</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

+0

http://stackoverflow.com/questions/18763027/jquery-tablesorter-index-column-insert – Mottie

+0

@Mottieの重複あなたが提供された答えに応答して、右ですが、道他の質問誰かが理解していない可能性があります。その質問は単にインデックスを追加するように求められましたが、固定されていなければならないとは言いませんでした。 –

答えて

1

あなたはsortEndイベントに結合し、単に最初の列に新しいテキストを書き込むことができます行う必要があります方法上の任意のアイデア。

次のコードは、このコールバック関数は(ゼロを受信

  • jQueryの.text()が一致する各要素(http://api.jquery.com/text/)のための新しいテキストを計算して返すためにコールバック関数を受け入れる

    • という事実を利用しています)要素のインデックスは、最初の引数として基づき、あなたは別のカウンタ変数

    $(function() { 
     
        $("#myTable").tablesorter({ 
     
         headers: { 
     
          0: { 
     
           sorter: false 
     
          }, 
     
         } 
     
        }).on("sortEnd", function() { 
     
         $(this).find('tbody td:first-child').text(function (i) { 
     
          return i + 1; 
     
         }); 
     
        }); 
     
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script> 
     
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' /> 
     
    <table id='myTable' cellspacing="1" class="tablesorter-blue">    
     
        <thead> 
     
         <tr> 
     
          <th>#</th> 
     
          <th>last name</th> 
     
          <th>age</th> 
     
          <th>total</th> 
     
          <th>discount</th> 
     
          <th>date</th> 
     
         </tr> 
     
        </thead> 
     
        <tbody> 
     
         <tr> 
     
          <td>1</td> 
     
          <td>parker</td> 
     
          <td>28</td> 
     
          <td>$9.99</td> 
     
          <td>20%</td> 
     
          <td>jul 6, 2006 8:14 am</td> 
     
         </tr> 
     
         <tr> 
     
          <td>2</td> 
     
          <td>hood</td> 
     
          <td>33</td> 
     
          <td>$19.99</td> 
     
          <td>25%</td> 
     
          <td>dec 10, 2002 5:14 am</td> 
     
         </tr> 
     
         <tr> 
     
          <td>3</td> 
     
          <td>kent</td> 
     
          <td>18</td> 
     
          <td>$15.89</td> 
     
          <td>44%</td> 
     
          <td>jan 12, 2003 11:14 am</td> 
     
         </tr> 
     
         <tr> 
     
          <td>4</td> 
     
          <td>almighty</td> 
     
          <td>45</td> 
     
          <td>$153.19</td> 
     
          <td>44%</td> 
     
          <td>jan 18, 2001 9:12 am</td> 
     
         </tr> 
     
         <tr> 
     
          <td>5</td> 
     
          <td>evans</td> 
     
          <td>22</td> 
     
          <td>$13.19</td> 
     
          <td>11%</td> 
     
          <td>jan 18, 2007 9:12 am</td> 
     
         </tr> 
     
        </tbody> 
     
    </table>
    を維持する必要がないように

  • 関連する問題