Hãy xem xét bảng của tôi với mười hàng và tôi muốn hiển thị ba hàng đầu tiên trong page1 và cứ thế ... Làm thế nào để phân trang một bảng bằng jquery? Bất kỳ plugin tốt nào ....Có thể Phân trang một bảng bằng jquery không?
Trả lời
Có plugin để làm điều này:.
- http://plugins.jquery.com/project/pagination
- http://beckelman.net/demos/jqueryTableSorterConPaging/default.aspx
Ngoài ra, có một hướng dẫn tốt ở đây bao gồm tất cả các loại thao tác bảng trong jQuery bao gồm p agination: http://www.packtpub.com/article/jquery-table-manipulation-part1
Thật không may , hai liên kết đầu tiên đã được di chuyển –
Plugin jTable ở đây: http://plugins.jquery.com/jTable/ với nhiều thông tin hơn bao gồm các liên kết đến tài liệu tại đây: http://jtable.org/Home/Downloads. – John
Tóm lại, có.
Có plugin cho jquery pagination.
Ngoài ra còn có Pajinate.
Bạn cũng có thể chỉ cần đi đến the plugins phần của jQuery trang web và tìm kiếm từ khóa mà bạn đang quan tâm đến
Bạn có thể sử dụng plugin Tablesorter, với số đi kèm pagination plugin.
Tôi thích cái này datatables.
Bạn có thể sử dụng plugin datatable
. Nó rất hữu ích với tính năng tìm kiếm và số trang tùy chỉnh.
Tôi nghĩ đơn giản nhất là datatables. Link: http://www.datatables.net/ sử dụng "phân trang: true"
Vì vậy, mã sẽ là một cái gì đó như:
$('#your-table').dataTable({
"scrollY": "350px",
"scrollCollapse": true,
"bSort": false,
"paging": true
});
<table class="paginated">
<thead>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
-
<script>
$('td', 'table').each(function(i) {
$(this).text(i+1);
});
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
$table.trigger('repaginate');
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows/numPerPage);
var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table).find('span.page-number:first').addClass('active');
});
</script>
-
<style>
table {
width: 40em;
margin: 2em auto;
}
thead {
background: #000;
color: #fff;
}
td {
width: 10em;
padding: 0.3em;
}
tbody {
background: #ccc;
}
div.pager {
text-align: center;
margin: 1em 0;
}
div.pager span {
display: inline-block;
width: 1.8em;
height: 1.8em;
line-height: 1.8;
text-align: center;
cursor: pointer;
background: #000;
color: #fff;
margin-right: 0.5em;
}
div.pager span.active {
background: #c00;
}
</style>
- 1. 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
- 2. Cách có nhiều bảng jQuery TableSorter trên một trang
- 3. Chuyển đến cuối trang bằng jQuery - Không có hoạt ảnh
- 4. Tôi có thể phân vùng một bảng bằng HIVE như thế nào?
- 5. jQuery UI khả năng phân loại có thể phân loại
- 6. Có thể tải trước nội dung trang bằng kỹ thuật ajax/jquery không?
- 7. Jquery tìm xem trang có chứa id cụ thể không?
- 8. Cách tạo bảng có thể thay đổi kích thước bằng html với thanh cuộn bằng jQuery?
- 9. bảng jquery tablesorter ajax chỉ phân loại một hướng
- 10. Kích thước phân trang dữ liệu jQuery
- 11. Không thể phân giải tên bảng gần
- 12. Phân trang Ajax với Jquery, PHP, Mysql
- 13. Các tab cuộn/phân trang JQuery
- 14. Có thể theo dõi các liên kết băm như các trang có phân tích google không?
- 15. Giá trị tải trọng lười trong phân đoạn dữ liệu được phân trang bằng cách sử dụng jquery
- 16. Hàng Bảng, bạn có thể đặt chiều cao bằng không?
- 17. Wordpress: Có thể một trang có hai cha mẹ không?
- 18. Tôi có thể phân vùng một vector bằng cách nào?
- 19. Tạo số trang bằng javascript/jquery?
- 20. Có thể tạo trang facebook bằng đồ thị api không?
- 21. Có thể buộc trình duyệt tải lại cùng một trang bằng một băm không?
- 22. Tôi có thể đếm các phần tử bằng jQuery không?
- 23. Có thể tải nhiều phiên bản jQuery khác nhau trên cùng một trang không?
- 24. Phương thức post() của jquery có thể gọi một trang web asp.net 3.5 không?
- 25. UIScrollView - khi bật phân trang, tôi có thể "thay đổi" chiều rộng của trang không?
- 26. Tôi có thể tạo thẻ tập lệnh bằng jQuery không?
- 27. Màn hình đăng nhập có thể tạo bảng phân cảnh?
- 28. Sử dụng JQuery để lấy HTML từ một trang web khác: Có thể? Hợp pháp?
- 29. Bảng phân trang với ASP.NET MVC và AJAX
- 30. Có thể hoặc có ý nghĩa để tạo một trang web chỉ có dịch vụ jquery/.NET không?
Vâng. Có một hướng dẫn hay tại đây: www.youtube.com/phpapplied – Norse