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组件

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

        });

第一次使用吧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的实现方式：

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