Ist es möglich, eine Tabelle mit jquery zu paginieren?

Question

Betrachten Sie meine Tabelle mit zehn Zeilen und ich möchte die ersten drei Zeilen in page1 usw. zeigen ... Wie paginate eine Tabelle mit jquery? Jedes gute Plugin ....

Answer 1

Es Plugins sind, dies zu tun.

• http://plugins.jquery.com/project/pagination
• http://beckelman.net/demos/jqueryTableSorterConPaging/default.aspx

Außerdem gibt es hier ein gutes Tutorial, das alle Arten von Tabellenmanipulationen in jQuery einschließlich p abdeckt azination: http://www.packtpub.com/article/jquery-table-manipulation-part1

Answer 2

Kurz gesagt, ja.

Es gibt ein Plugin für jquery pagination.

Answer 3

Es gibt auch Pajinate.

können Sie auch the plugins Abschnitt von jQuery Website und Suchbegriffen Sie interessiert sind gehen Sie einfach

Answer 4

Sie können das Tablesorter Plugin mit dem dazugehörigen pagination plugin verwenden.

Answer 5

Ich bevorzuge diese datatables.

Answer 6

Sie können datatable plugin.It ist sehr nützlich mit der Suche und benutzerdefinierte Seitennummer Feature.

Answer 7

Ich denke am einfachsten ist datatables. Link: http://www.datatables.net/ mit "Paging: true"

So würde Code so etwas wie:

 $('#your-table').dataTable({ 
      "scrollY": "350px", 
      "scrollCollapse": true, 
      "bSort": false, 
      "paging": true 
     }); 

Answer 8

<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> 

http://jsfiddle.net/LiquidSky/djav37tg/