完全是你的代码但是分页失败了
时间: 2024-03-19 19:46:14 浏览: 16
很抱歉,可能是我之前的回答存在问题。您可以尝试通过以下方式来实现静态数据列表分页:
HTML代码:
```
<table id="dg"></table>
<div id="dgPager"></div>
```
JavaScript代码:
```
$(function(){
$('#dg').datagrid({
columns:[[
{field:'id',title:'ID',width:100},
{field:'name',title:'Name',width:100},
{field:'age',title:'Age',width:100}
]],
data:[
{id:1,name:'John',age:30},
{id:2,name:'Mike',age:25},
{id:3,name:'Lisa',age:35},
{id:4,name:'Mary',age:28},
{id:5,name:'Bob',age:32},
{id:6,name:'Tom',age:27},
{id:7,name:'Jerry',age:29},
{id:8,name:'Kate',age:31},
{id:9,name:'David',age:26},
{id:10,name:'Peter',age:33},
{id:11,name:'Lucy',age:24},
{id:12,name:'Jack',age:36},
{id:13,name:'Alice',age:23},
{id:14,name:'Frank',age:34},
{id:15,name:'Sam',age:22}
],
striped:true,
pagination:true,
rownumbers:true,
pageSize:5,
pageList:[5,10,15],
toolbar:"#toolbar",
fitColumns:true,
onBeforePagination:function(pageNumber, pageSize){
var start = (pageNumber - 1) * pageSize;
var end = start + pageSize;
var rows = $('#dg').datagrid('getRows');
if(end > rows.length){
end = rows.length;
}
var data = rows.slice(start, end);
$('#dg').datagrid('loadData', data);
return false;
}
});
});
```
其中,我们使用了HTML中的table元素来替代div元素作为DataGrid的容器,并添加了一个用于显示分页导航条的div元素。
在JavaScript代码中,我们仍然使用了datagrid方法来初始化DataGrid组件,并设置了columns、data、striped、rownumbers等属性。同时,我们将pagination、pageSize、pageList、toolbar、fitColumns等属性也设置了一遍。
关键是在onBeforePagination事件中,我们手动实现了数据分页的操作。根据当前页码和每页显示的记录数,从数据源中截取出该页需要显示的数据,然后调用loadData方法重新加载DataGrid数据即可。
这样,就实现了静态数据列表的分页功能。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)