jquery-EasyUI---pagination 分页

1、使用标签创建分页控件

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div> 

2、创建一个空标签，js初始化pagination组件

1 $('#pp-1').pagination({ 
2             total:200, 
3             pageSize:10，
　　　　　　　　pageList: [5,10,20,50,100],
4         });

第一次使用吧pageSize 接过右侧就出NAN了，可能默认最小pagesize就是10，不过我们可以设置他的大小的，见上面绿色部分

3、当然页面上面可以配置很多别的按钮，这个按照api去搞就行了

这里研究常用的场景：

分页的实现

一种用标签实现：

<div id="content" class="easyui-panel" style="height:200px" 
data-options="href:'test.json?page=1'">
<!--这里在panel中加载一个json列表先不管显示内容样式--> 
</div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
        data-options="
            total: 2000,
            pageSize: 10,
            onSelectPage: function(pageNumber, pageSize){
                $('#content').panel('refresh', 'test-1.json?page='+pageNumber+'pageSize='+pageSize);

 }">

<!--这里点击分页控件的时候，就会去请求test-1.json这个文件并且pageNumber会自动带上--> 

</div>

 

用js实现方式：panel这里不做改动，只去关注pagination的实现方式：

1 $('#pp-1').pagination({ 
2             total:200, 
3             pageSize:5,
4             pageList: [5,10,20,50,100],
5             onSelectPage:function(pageNumber, pageSize){
6                 $(this).pagination('loading');//页面loading的状态
7                 $('#content').panel('refresh', 'test-1.json?page='+pageNumber);
　　　　　　　　　 　$(this).pagination('loaded');//loading之后 
8             }
9         });

 

 

 

 

转载于:https://www.cnblogs.com/knightshibiao/p/3826561.html