blocks|key|1652627|text|人力资源管理。从tablesorter重新组织表的方法来看，我非常确定这不是完全可能的。Tablesorter将每个tr逐个从DOM中取出，并根据索引字段对它们进行排序，重新插入整个tr，而不会以任何方式更改tr的内容。然后，您请求的解决方案需要在每次排序后迭代回表，并重新枚举第一列。Tablesorter确实有一个插件方法，供zebrastripe和其他扩展使用。也许这可以用来挂接排序方法？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1652628|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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?</p>


blocks|key|1652655|text|这是一个你可以使用的小部件，它将完成你正在寻找的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1652656|$(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%2B%2B)+{
++++++++++++++++$("tbody+tr:eq("+%2B+i+%2B+")+td:first",table).html(i%2B1);
++++++++++++}+++++++++++++++++++++++++++++++++++
++++++++}
++++});

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

});|code-block|syntax|javascript|1652657|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is a widget you can use that will accomplish what you are looking for:</p>

<pre><code>$(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 &lt; table.tBodies[0].rows.length; i++) {
                $("tbody tr:eq(" + i + ") td:first",table).html(i+1);
            }                                   
        }
    });

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

});
</code></pre>


blocks|key|1652733|text|编辑:我在http://jsbin.com/igupu4/3上做了一个这种技术的例子。单击任意列标题进行排序...|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1652734|虽然我没有回答你关于jquery的问题，但这里有一种替代方法来获得你在这里描述的特定行为，即在排序后修复行数。(使用CSS，特别是content+property和counter+related+properties/functions。)|1652735|<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>|code-block|syntax|javascript|1652736|如果您的浏览器与CSSS2.1完全兼容，则可以在示例1中使用tr:before而不是td:first-child:before。(Mozilla+only+supports+this+in+trunk+for+now...)|1652737|在示例2中，您可以看到如何将行号列放置在任何位置，而不仅仅是第一列。|1652738|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/igupu4/3|1|http://www.w3.org/TR/CSS2/generate.html#content|2|http://www.w3.org/TR/CSS2/syndata.html#counter|3|https://developer.mozilla.org/web-tech/2008/08/20/css-21-generated-content/^0|5|P|0|0|1T|G|1|2A|10|2|0|0|1T|1A|3|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]|$A|1A|B|1B|1|1C]]|C|$]]|$1|F|3|G|5|H|7|1D|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|M|3|N|5|6|7|1I|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]|Y|$5|R|S|T|C|$U|Z]]|10|$5|R|S|T|C|$U|11]]]]

<p>Edit: I've made a sample of this technique at <a href="http://jsbin.com/igupu4/3" rel="nofollow noreferrer">http://jsbin.com/igupu4/3</a>. Click any column heading to sort...</p>

<p>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 <a href="http://www.w3.org/TR/CSS2/generate.html#content" rel="nofollow noreferrer">content property</a>, and <a href="http://www.w3.org/TR/CSS2/syndata.html#counter" rel="nofollow noreferrer">counter related properties/functions</a>.)</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;test&lt;/title&gt;
  &lt;style type="text/css"&gt;
    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) ; 
    }
  &lt;/style&gt;
  &lt;script src="jquery-1.2.6.min.js" &gt;&lt;/script&gt;
  &lt;script src="jquery.tablesorter.min.js" &gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function() 
      { 
        $("table").tablesorter(); 
      } 
    ); 
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;table id="sample1"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Col 1&lt;/th&gt;
        &lt;th&gt;Col 2&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;p&gt;foo&lt;/p&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;p&gt;quuz&lt;/p&gt;
        &lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr&gt;
        &lt;td&gt;bar&lt;/td&gt;
        &lt;td&gt;quux&lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr&gt;
        &lt;td&gt;baz&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

  &lt;table id="sample2"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Rownums&lt;/th&gt;
        &lt;th&gt;Col 1&lt;/th&gt;
        &lt;th&gt;Col 2&lt;/th&gt;
        &lt;th&gt;More Rownums&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td class="rownums"&gt;&lt;/td&gt;
        &lt;td&gt;
          &lt;p&gt;foo&lt;/p&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;p&gt;bar&lt;/p&gt;
        &lt;/td&gt;
        &lt;td class="rownums"&gt;&lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr&gt;
        &lt;td class="rownums"&gt;&lt;/td&gt;
        &lt;td&gt;quuz&lt;/td&gt;
        &lt;td&gt;baz&lt;/td&gt;
        &lt;td class="rownums"&gt;&lt;/td&gt;
      &lt;/tr&gt;

      &lt;tr&gt;
        &lt;td class="rownums"&gt;&lt;/td&gt;
        &lt;td&gt;fred&lt;/td&gt;
        &lt;td&gt;quux&lt;/td&gt;
        &lt;td class="rownums"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>If your browser is sufficiently CSS2.1 compatible, you can use tr:before instead of td:first-child:before in sample 1. (<a href="https://developer.mozilla.org/web-tech/2008/08/20/css-21-generated-content/" rel="nofollow noreferrer">Mozilla only supports this in trunk for now...</a>)</p>

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


blocks|key|1438145|text|对于那些在寻找一种方法将列排除在可排序之外(即列上的可单击标题)的人来说，下面的示例排除了列4(零索引)的排序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1438146|$("table").tablesorter({
++++headers:+{4:+{sorter:+false}}
});|code-block|syntax|javascript|1438147|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For those who find this while looking for a way to exclude a column from being sortable (i.e. clickable header on the column), the below example excludes column 4 (zero-indexed) from being sorted):</p>

<pre><code>$("table").tablesorter({
    headers: {4: {sorter: false}}
});
</code></pre>


blocks|key|1438180|text|这将跳过对第一列的排序，并允许对第二列进行排序。只需将从第一列开始的所有列的true/false设置为零。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1438181|<script>
$(document).ready(function()+{+
++++$("table").tablesorter({
++++++++headers:+{
++++++++++++0:+{sorter:+false},
++++++++++++1:+{sorter:+true},
++++++++++++3:+{sorter:+false}
++++++++}//headers
++++});+
});++++++++++++
</script>|code-block|syntax|javascript|1438182|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This would skip sorting for the first column, and allow it for the second one. Just set true/false for all columns starting with first column as zero.</p>

<pre><code>&lt;script&gt;
$(document).ready(function() { 
    $("table").tablesorter({
        headers: {
            0: {sorter: false},
            1: {sorter: true},
            3: {sorter: false}
        }//headers
    }); 
});            
&lt;/script&gt;
</code></pre>


blocks|key|1652898|text|Brian+Fisher的答案是正确的，但在大型表(在我的示例中为%2B1600行)中速度太慢。我改进了遍历每一行的方式。其他一切都是一样的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1652899|$(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++
++++++++++++$(table).find("tr+td:first-child").each(function(index){
++++++++++++++++$(this).text(index%2B1);
++++++++++++})++++++++++++++++++++++++++++++++++
++++++++}
++++});

++++$("table").tablesorter({
++++++++widgets:+['zebra','indexFirstColumn']
++++});
});|code-block|syntax|javascript|1652900|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The answer of Brian Fisher is correct, but it is too slow in large tables (+1600 rows in my example). I improved the way of iterating through every rows. Everything else is the same.</p>

<pre><code>$(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  
            $(table).find("tr td:first-child").each(function(index){
                $(this).text(index+1);
            })                                  
        }
    });

    $("table").tablesorter({
        widgets: ['zebra','indexFirstColumn']
    });
});
</code></pre>


blocks|key|1438240|text|$("table").tablesorter({
++++headers:+{4:+{sorter:+false},8:+{sorter:+false}}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1438241|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$("table").tablesorter({
    headers: {4: {sorter: false},8: {sorter: false}}
});
</code></pre>


blocks|key|1438306|text|只是这个问题的最新进展。虽然投票最多的答案是一个很好的解决方案，但jstablesorter团队添加了这个功能，所以在您的html单元格中添加以下属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1438307|data-sorter="false"|code-block|syntax|javascript|1438308|这是一种无缝的方法，可以禁止任何标头排序。|1438309|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Just an update on this question. While the top voted answer is a wonderful solution, the jstablesorter team added this feature so in your html cell add the following attribute:</p>
<pre><code>data-sorter=&quot;false&quot;
</code></pre>
<p>And that is a seamless way to disable any header from sorting.</p>


<p>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 number" column fixed so that it is easy to see what position in the table a particular row is, after sorting.</p>

<p>For example:</p>

<pre><code>#    name
-----------
1    papaya
2    apple
3    strawberry
4    banana
</code></pre>

<p>When sorted on the name column, should result in:</p>

<pre><code>#    name
-----------
1    apple
2    banana
3    papaya
4    strawberry
</code></pre>

<p>Thanks.</p>


Exclude a column from being sorted using jQuery tablesorter

jQuery

我正在寻找一种方法，可以使用jQuery的表排序插件来排除单个列的排序。具体地说，我有一个相当大的表，并希望保持“行号”列的固定，以便在排序后很容易看到特定行在表中的位置。例如：#    name-----------1    papaya2    apple3    strawberry4    banana在名称列...

问不使用jQuery表排序程序对列进行排序
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用jQuery表排序程序对列进行排序EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不使用jQuery表排序程序对列进行排序
EN