【jQuery】HTMLテーブルのためのシンプルなページネーションプラグインjQuery paginate

jQuery paginateはHTMLテーブルのためのシンプルなページネーションjQueryプラグイン

CSS

.page-navigation a {
margin: 0 2px;
display: inline-block;
padding: 3px 5px;
color: #ffffff;
background-color: #70b7ec;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
}
.page-navigation a[data-selected] {
background-color: #3d9be0;
}

JS

<!-- Add it after your jquery file! -->
<script src='jquery.min.js'></script>
<script src='jquery-paginate.min.js'></script>

Basic usage

<table id="myTable">
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
</tr>
<!-- ... -->
</tbody>
</table>
$('#myTable').paginate({ limit: 10 });

Options

$('#myTable').paginate({
limit: 10, // 10 elements per page
initialPage: 1, // Start on second page
previous: true, // Show previous button
previousText: 'Previous page', // Change previous button text
next: true, // Show previous button
nextText: 'Next page', // Change next button text
first: true, // Show first button
firstText: 'First', // Change first button text
last: true, // Show last button
lastText: 'Last', // Change last button text
optional: false, // Always show the navigation menu
onCreate: function(obj) { console.log('Pagination done!'); } // `onCreate` callback
onSelect: function(obj, i) { console.log('Page ' + i + ' selected!'); } // `onSelect` callback
childrenSelector: 'tbody > tr.ugly', // Paginate the rows with the `ugly` class
navigationWrapper: $('div#myNavWrapper'), // Append the navigation menu to the `#myNavWrapper` div
navigationClass: 'my-page-navigation', // New css class added to the navigation menu
pageToText: function(i) { return (i + 1).toString(16); } // Page numbers will be shown on hexadecimal notation
});

MITライセンス

 
jQuery paginate

【jQuery】HTMLテーブルのためのシンプルなページネーションプラグインjQuery paginate

  • LATEST
  • RELATED
  • POPULAR