ansaurus

Question

Exclude a column from being sorted using jQuery tablesorter

Answer 1

A:

Hrm. From tablesorter's method of reorganizing the table, I'm pretty sure that this isn't entirely possible. Tablesorter pulles each tr out of the DOM one by one and sorts them based on an indexed field, reinserting the entire tr without changing the tr's contents in any way. Your requested solution would then need to iterate back through the table after each sort and re-enumerate the first column. Tablesorter does have a plugin method, which is used by the zebrastripe and other extensions. Perhaps this could be used to hook the sort methods?

yaauie 2009-01-12 22:50:05

Answer 2

A:

You could write some jQuery that redoes the row numbers. If you provide me with some HTML, I'll write a script for you. :)

Salty 2009-01-12 23:04:24

Answer 3

+4 A:

Here is a widget you can use that will accomplish what you are looking for:

$(function() {
    // add new widget called indexFirstColumn
    $.tablesorter.addWidget({
     // give the widget a id
     id: "indexFirstColumn",
     // format is called when the on init and when a sorting has finished
     format: function(table) {    
      // loop all tr elements and set the value for the first column 
      for(var i=0; i < table.tBodies[0].rows.length; i++) {
       $("tbody tr:eq(" + (i - 1) + ") td:first",table).html(i);
      }            
     }
    });

    $("table").tablesorter({
     widgets: ['zebra','indexFirstColumn']
    });

});

Brian Fisher 2009-01-12 23:12:50

Very nice! I think that in the for loop there should be '<=' rather than '<'.

Marcin 2010-03-21 06:50:32

Answer 4

+2 A:

Edit: I've made a sample of this technique at http://jsbin.com/igupu4/3. Click any column heading to sort...

While I don't have an answer to your question about jquery, here's an alternate way to get the specific behaviour you described here, fixed row numbers after sorting. (Using CSS, specifically the content property, and counter related properties/functions.)

<html>
<head>
  <title>test</title>
  <style type="text/css">
    tbody tr 
    {
      counter-increment : rownum ; 
    }
    tbody 
    { 
      counter-reset: rownum; 
    }
    table#sample1 td:first-child:before 
    { 
      content: counter(rownum) " " ; 
    }
    table#sample2 td.rownums:before 
    { 
      content: counter(rownum) ; 
    }
  </style>
  <script src="jquery-1.2.6.min.js" ></script>
  <script src="jquery.tablesorter.min.js" ></script>
  <script>
    $(document).ready(function() 
      { 
        $("table").tablesorter(); 
      } 
    ); 
  </script>
</head>

<body>
  <table id="sample1">
    <thead>
      <tr>
        <th>Col 1</th>
        <th>Col 2</th>
    </thead>
    <tbody>
      <tr>
        <td>
          <p>foo</p>
        </td>
        <td>
          <p>quuz</p>
        </td>
      </tr>

      <tr>
        <td>bar</td>
        <td>quux</td>
      </tr>

      <tr>
        <td>baz</td>
        <td>baz</td>
      </tr>
    </tbody>
  </table>

  <table id="sample2">
    <thead>
      <tr>
        <th>Rownums</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>More Rownums</th>
    </thead>
    <tbody>
      <tr>
        <td class="rownums"></td>
        <td>
          <p>foo</p>
        </td>
        <td>
          <p>bar</p>
        </td>
        <td class="rownums"></td>
      </tr>

      <tr>
        <td class="rownums"></td>
        <td>quuz</td>
        <td>baz</td>
        <td class="rownums"></td>
      </tr>

      <tr>
        <td class="rownums"></td>
        <td>fred</td>
        <td>quux</td>
        <td class="rownums"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

If your browser is sufficiently CSS2.1 compatible, you can use tr:before instead of td:first-child:before in sample 1. (Mozilla only supports this in trunk for now...)

In sample 2, you can see how to position your row-number columns anywhere, not just in the first column.

Stobor 2009-01-13 00:18:32

ansaurus

tags:

views:

answers:

Exclude a column from being sorted using jQuery tablesorter

related questions