easyui静态数据列表分页
时间: 2023-07-18 18:40:07 浏览: 353
详解datagrid使用方法(重要)
可以使用EasyUI的DataGrid组件实现静态数据列表分页的功能。具体步骤如下:
1. 在HTML页面中引入EasyUI相关的CSS和JS文件,以及jQuery文件。
2. 在页面中定义一个div元素,作为DataGrid的容器。
3. 编写JavaScript代码,初始化DataGrid组件,设置相关配置参数,包括分页、列定义、数据源等。
示例代码如下:
HTML代码:
```
<div id="dg"></div>
```
JavaScript代码:
```
$(function(){
$('#dg').datagrid({
columns:[[
{field:'id',title:'ID',width:100},
{field:'name',title:'Name',width:100},
{field:'age',title:'Age',width:100}
]],
pagination:true,
pageSize:10,
pageList:[10,20,30],
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}
]
});
});
```
其中,columns定义了DataGrid的列,pagination设置为true表示启用分页,pageSize定义了每页显示的记录数,pageList定义了可供选择的每页记录数列表,data定义了DataGrid的数据源。
运行代码,即可看到实现了静态数据列表分页的效果。
阅读全文