Loại trừ một cột khỏi bị sắp xếp bằng cách sử dụng bảng phân trang jQuery

Tôi đang tìm cách loại trừ một cột đơn lẻ khỏi sắp xếp bằng cách sử dụng plugin tablespace của jQuery. Cụ thể, tôi có một bảng khá lớn và muốn giữ cột "số hàng" cố định để dễ dàng thấy vị trí nào trong bảng một hàng cụ thể, sau khi sắp xếp.Loại trừ một cột khỏi bị sắp xếp bằng cách sử dụng bảng phân trang jQuery

Ví dụ:

# name 
----------- 
1 papaya 
2 apple 
3 strawberry 
4 banana

Khi sắp xếp trên cột tên, nên kết quả trong:

# name 
----------- 
1 apple 
2 banana 
3 papaya 
4 strawberry

Cảm ơn.

Nguồn

2009-01-12 Chad Birch

Dưới đây là một tiện ích bạn có thể sử dụng mà sẽ thực hiện những gì bạn đang tìm kiếm:

$(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 + ") td:first",table).html(i+1); 
      }         
     } 
    }); 

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

});

Nguồn

2009-01-12 23:12:50

Rất đẹp! Tôi nghĩ rằng trong vòng lặp for nên có '<=' thay vì '<'. – Marcin

Công cụ tuyệt vời, một điều nhỏ mặc dù, nó không nên bắt đầu lặp từ 'var i = 0;' nhưng 'var i = 1;' nếu không nó sẽ nhận được 0 chỉ mục ở dưới cùng của bảng. – Marcin

Hrm. Từ phương pháp sắp xếp lại bảng của bảng, tôi khá chắc chắn rằng điều này không hoàn toàn có thể. Tablesorter pulles mỗi tr out của DOM từng cái một và sắp xếp chúng dựa trên một trường được lập chỉ mục, reinserting toàn bộ tr mà không thay đổi nội dung của tr trong bất kỳ cách nào. Giải pháp được yêu cầu của bạn sau đó sẽ cần phải lặp lại qua bảng sau mỗi sắp xếp và liệt kê lại cột đầu tiên. Tablesorter không có phương thức plugin, được sử dụng bởi zebrastripe và các phần mở rộng khác. Có lẽ điều này có thể được sử dụng để móc các phương pháp sắp xếp?

Nguồn

2009-01-12 22:50:05 yaauie

Edit: Tôi đã thực hiện một mẫu của kỹ thuật này tại http://jsbin.com/igupu4/3. Nhấp vào bất kỳ tiêu đề cột nào để sắp xếp ...

Mặc dù tôi không có câu trả lời cho câu hỏi của bạn về jquery, đây là cách thay thế để có hành vi cụ thể mà bạn mô tả ở đây, số hàng cố định sau khi sắp xếp. (. Sử dụng CSS, đặc biệt là content property, và 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>

Nếu trình duyệt của bạn là đủ CSS2.1 tương thích, bạn có thể sử dụng tr: trước khi thay vì td: first-child: trước trong mẫu 1. (Mozilla only supports this in trunk for now...)

Trong ví dụ 2, bạn có thể xem cách định vị các cột số hàng của mình ở bất kỳ đâu, không chỉ trong cột đầu tiên.

Nguồn

2009-01-13 00:18:32 Stobor

Đối với những người tìm thấy điều này trong khi tìm kiếm một cách để loại trừ một cột từ việc sắp xếp được (tức là có thể click tiêu đề trên cột), ví dụ dưới đây không bao gồm cột 4 (zero-lập chỉ mục) từ được sắp xếp):

$("table").tablesorter({ 
    headers: {4: {sorter: false}} 
});

Nguồn

2012-10-16 23:41:33 bcoughlan

Điều này sẽ bỏ qua sắp xếp cho cột đầu tiên và cho phép cột thứ hai. Chỉ cần đặt đúng/sai cho tất cả các cột bắt đầu bằng cột đầu tiên là 0.

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

Nguồn

2014-03-06 16:14:55 user3389065

Câu trả lời của Brian Fisher là đúng, nhưng nó quá chậm trong bảng lớn (+1600 hàng trong ví dụ của tôi). Tôi đã cải thiện cách lặp qua từng hàng. Mọi thứ khác là như nhau.

$(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'] 
    }); 
});

Nguồn

2016-10-25 09:48:04 Hubert

$("table").tablesorter({ 
    headers: {4: {sorter: false},8: {sorter: false}} 
});

Nguồn

2016-11-15 12:16:56

Câu trả lời của Stobor là hoàn hảo. Vấn đề duy nhất là cần phải chờ cho đến khi bảng được trả lại hoàn toàn để đặt các con số.

Một số quan sát:

Bạn cần phải đưa ra một cột trống cho phương pháp này đưa những con số.
Nếu bạn có tiêu đề trong bảng, bạn phải sử dụng thẻ THEAD và TBODY để cho phép trình sắp xếp bảng chỉ sắp xếp dữ liệu trong phần TBODY.
Nếu bạn có chân trang trong bảng, bạn phải để phần này ra khỏi phần TBODY để tránh bảng phân loại nội dung của mình, bạn cũng phải sử dụng thẻ TH thay vì TD để tránh đánh số chân trang.

Lưu ý: Phương pháp được hiển thị bởi Abdul chỉ giới hạn cho người dùng sắp xếp theo các cột được chỉ định, nhưng nội dung của anh ấy luôn được đặt hàng với phần còn lại của hàng khi một đơn hàng theo cột không hạn chế khác được chọn.

Nguồn

2016-11-17 19:49:26 Jorge

Loại trừ một cột khỏi bị sắp xếp bằng cách sử dụng bảng phân trang jQuery

Trả lời

Các vấn đề liên quan