发表新帖
发表新帖

Exclude a column from being sorted using jQuery tablesorter

后端 未结
关注
8 1769
有刺的猬
有刺的猬 2021-02-01 21:30

I am looking for a way to exclude a single column from being sorted using jQuery\'s tablesorter plugin. Specifically, I have a fairly large table and would like to keep a \"row

相关标签:
8条回答
  • 無奈伤痛
    2021-02-01 22:07

    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.

    0 讨论(0)
  • 别那么骄傲
    2021-02-01 22:07

    The answer of Stobor is perfect. The only problem is that needs to wait until the table is rendered completly to put the numbers.

    Some observations:

    • You need to give an empty column for this method put the numbers.
    • If you have headers in the table you have to use the tags THEAD and TBODY to let tablesorter to sort only the data in the TBODY section.
    • If you have a footer in your tables, you have to let this out of the TBODY section to avoid tablesorter to sort his content, also you have to use tags TH instead TD to avoid numerating the footer.

    Note: The method shown by Abdul only restricts to the user to sort by the indicated columns, but his content is always ordered with the rest of the row when an order by other unrestricted column is selected.

    0 讨论(0)
 看不清?
提交回复
热议问题