每页分页记录
Records per Page Pagination
我有一个有大量数据的表，我希望能够选择我想要显示每页的行数。我有一个记录每页组合框，并在表的底部分页导航，但我不知道如何做到这一点…
所有的代码都在这里，所以你可以很容易地看到我的问题:
小提琴
和代码:
<section id="search_processes" class="center"> <div id="filter_content" class="table pull-left">
<table id="table_filters">
<tr id="row_special">
<td class="exp">
<label>Records per Page:</label>
<br/>
<select id="records_comboBox">
<option id="any" value="any">Any</option>
<option id="10" value="10">10</option>
<option id="25" value="25">25</option>
<option id="50" value="50">50</option>
</select>
</td>
</tr>
</table> </div> </div> </section>
<section id="processes" class="center"> <table id="table_processes" class="table-hover">
<tr id="table_processes_row">
<th data-field="status">Status</th>
<th data-field="id">ID</th>
<th data-field="pid">PID</th>
<th data-field="process_name">Process Name</th>
<th data-field="description">Description</th>
<th data-field="application">Application</th>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>sme</td>
<td>Process Instance has been created.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Name</td>
<td>Process Instance has been started.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>sss Name</td>
<td>Process Instance has ended.</td>
<td>App</td>
</tr> </table> <nav aria-label="Page navigation" class="pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a>
</li>
</ul> </nav>
</section>
* {
font-family: 'Source Sans Pro', sans-serif;
}
body {
overflow-x: hidden;
}
#flag_active {
color: green;
}
#flag_inactive {
color: red;
}
#table_processes_row {
height: 40px;
border-top: .12em solid #A9A9A9;
}
td {
border-top: .12em solid #ddd;
}
th {
background-color: #DCDCDC;
text-align: center;
}
#table_processes {
width: 100%;
text-align: center;
}
#table_filters td {
padding-left: 20px;
}
#table_filters input {
height: 30px;
width: 140px;
}
#status_comboBox {
height: 30px;
width: 140px;
}
#status_comboBox option {
width: 100px;
}
#records_comboBox {
height: 30px;
width: 60px;
}
#records_comboBox option {
width: 100px;
}
我已经编辑了代码，只适用于组合框，您可以尝试相同的导航。
可替换使用
Bootstrap datatable search函数
function results(thisEle){
$("#table_processes tr").removeClass('hideTr');
for(var i = 0; i < $("#table_processes tr").length; i++) {
if(i>thisEle.value && thisEle.value!="any")
$("#table_processes tr")[i].className='hideTr';
}
}* {
font-family: 'Source Sans Pro', sans-serif;
}
body {
overflow-x: hidden;
}
.hideTr{
display:none;
}
#flag_active {
color: green;
}
#flag_inactive {
color: red;
}
#table_processes_row {
height: 40px;
border-top: .12em solid #A9A9A9;
}
td {
border-top: .12em solid #ddd;
}
th {
background-color: #DCDCDC;
text-align: center;
}
#table_processes {
width: 100%;
text-align: center;
}
#table_filters td {
padding-left: 20px;
}
#table_filters input {
height: 30px;
width: 140px;
}
#status_comboBox {
height: 30px;
width: 140px;
}
#status_comboBox option {
width: 100px;
}
#records_comboBox {
height: 30px;
width: 60px;
}
#records_comboBox option {
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="search_processes" class="center">
<div id="filter_content" class="table pull-left">
<table id="table_filters">
<tr id="row_special">
<td class="exp">
<label>Records per Page:</label>
<br/>
<select onchange="results(this)" id="records_comboBox">
<option id="any" value="any">Any</option>
<option id="10" value="10">10</option>
<option id="25" value="25">25</option>
<option id="50" value="50">50</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</section>
<section id="processes" class="center">
<table id="table_processes" class="table-hover">
<tr id="table_processes_row">
<th data-field="status">Status</th>
<th data-field="id">ID</th>
<th data-field="pid">PID</th>
<th data-field="process_name">Process Name</th>
<th data-field="description">Description</th>
<th data-field="application">Application</th>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>sme</td>
<td>Process Instance has been created.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Name</td>
<td>Process Instance has been started.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_active" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>Process Name</td>
<td>Process running.</td>
<td>App</td>
</tr>
<tr id="table_processes_row">
<td><i id="flag_inactive" class="fa fa-flag" aria-hidden="true"></i></td>
<td>2</td>
<td>1323213</td>
<td>sss Name</td>
<td>Process Instance has ended.</td>
<td>App</td>
</tr>
</table>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a>
</li>
</ul>
</nav>
</section>相关文章：
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 如何通过引用var Using DataTables来进行分页或排序
- 使用CSS或JavaScript计算分页符的数量
- DataTables-创建自定义分页样式(加载更多样式）
- 使用ajax的服务器端分页&jQuery
- 分页:如何用AJAX加载第一个页面
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号，
- 不带jquery的全屏分页
- DataTable没有显示分页按钮和记录信息-JQuery
- $http请求在一个请求中返回所有记录而不分页
- AngularJS:从Firebase获取用于分页的记录
- 从 MySQL 数据库对记录进行分页
- 使用jquery插件进行分页，当加载50k时记录导致整个系统冻结.如何解决这个问题
- 内联分页记录与PHP JQUERY AJAX JSON
- 如何获得Primefaces数据表当前页面上的总记录(通过YUI分页器)
- 根据记录的数量显示分页
- 移动数据表中分页旁边的每页记录
- 使用django-el-pagination(延迟分页)保存浏览器历史记录
- 每页分页记录
- 角度分页:当记录从第一页删除时，下一页的记录不会在第一页自动重新填充
