Tabelle sortieren, aber eine Spalte nicht verschieben

Ich möchte die Tabelle unten sortieren, aber gleichzeitig möchte ich nicht, dass sich die Nummerierungsspalte bewegt, stattdessen sollte sie fixiert bleiben, während sich die anderen Spalten bewegen. Jede Idee, wie ich es tun sollteTabelle sortieren, aber eine Spalte nicht verschieben

$(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>

Quelle

2016-07-30 Omari Victor Omosa

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

@Mottie Sie direkt mit Antwort auf die Antwort, die zur Verfügung gestellt wurde, aber die Art und Weise der andere Frage wurde gefragt, jemand hätte es vielleicht nicht verstanden. Die Frage, die nur darum gebeten wurde, einen Index hinzuzufügen, sagte aber nicht, dass er fest bleiben muss. –

Sie an das Ereignis sortEnd binden kann und einfach neue Text auf die erste Spalte schreiben.

Der folgende Code Vorteil der Sachlage führt, dass

jQuerys .text() eine Rückruffunktion übernimmt den neuen Text für jedes angepasste Element zu berechnen, und das Rück (http://api.jquery.com/text/)
dieser Callback-Funktion empfängt die (null- Basis) Elementindex als erstes Argument, so dass Sie benötigen keine separate Zählvariable

$(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>

zu halten

Quelle

2016-07-30 07:28:13 Tomalak

Tabelle sortieren, aber eine Spalte nicht verschieben

Antwort

Verwandte Themen