使用jQuery对表行进行分页 [英] Paginate table rows with jQuery
问题描述
我们正在使用Dynamics 365中的Customer Portal.我必须将分页插件与HTML表中的现有数据一起使用.
We are working with Customer Portal in Dynamics 365. I have to use a pagination plugin with existant data in the HTML table.
当前代码:
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
</tbody>
</table>
这里有一百多条记录.我必须在底部包括一个分页区域,以允许用户对表格进行分页.
Here there are more than one hundred of records. I have to include a pagination area in the bottom to allow users to paginate the table.
在Internet上进行挖掘时,我看到有多个插件可以实现分页,但是它们的数据源通常是对象数组.在这里,我必须对特定的行(<tr>
)进行分页.
While digging on internet I saw there are several plugins to achieve pagination but their data source are often an object array. Here I have to paginate specific rows (<tr>
).
到目前为止,我已经尝试过:
I have tried so far:
rows = [];
$('table:first tbody tr').each(function(i, row) {
rows.push(row);
});
recordsPerPage = 20;
pages = Math.ceil(rows.length / recordsPerPage);
在我写几行代码之前,我想知道是否有人知道一个插件仅对rows
包含的内容进行分页.
Before I write a bunch of lines I would like to know if someone knows about a plugin to paginate only what rows
contain.
例如,我可以像一样使用插件 Pagination.js href ="http://pagination.js.org/docs/index.html" rel ="nofollow noreferrer">文档说:
dataSource: function(done){
var result = [];
for (var i = 0; i < rows.length; i++) {
result.push(rows[i]);
}
done(result);
}
对吗?
预先感谢
推荐答案
经过大量研究,我发现了 Pagination.js .
After a lot of researching I found a posible solution with Pagination.js.
let rows = []
$('table tbody tr').each(function(i, row) {
return rows.push(row);
});
$('#pagination').pagination({
dataSource: rows,
pageSize: 1,
callback: function(data, pagination) {
$('tbody').html(data);
}
})
table {
border: 1px solid black;
}
th, td {
border: 1px solid black;
}
td {
padding: 5px;
}
#pagination {
width: 100%;
text-align: center;
}
#pagination ul li {
display: inline;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody id="data-container">
<tr>
<td>Column 1: Row 1</td>
<td>Column 2: Row 1</td>
<td>Column 3: Row 1</td>
<td>Column 4: Row 1</td>
</tr>
<tr>
<td>Column 1: Row 2</td>
<td>Column 2: Row 2</td>
<td>Column 3: Row 2</td>
<td>Column 4: Row 2</td>
</tr>
<tr>
<td>Column 1: Row 3</td>
<td>Column 2: Row 3</td>
<td>Column 3: Row 3</td>
<td>Column 4: Row 3</td>
</tr>
</tbody>
</table>
<div id="pagination"></div>
尽管如此,即使$.getScript('url', function() {});
或document.createElement('script')
加载了脚本,.pagination()
方法也无法正常工作,但我没有做这个工作,但是我认为这是一个不同的问题并发布...
Still, I don't make this work since the .pagination()
method is not working even if loaded the script with $.getScript('url', function() {});
or document.createElement('script')
but I think this is a different issue and post...
这篇关于使用jQuery对表行进行分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!