zoukankan      html  css  js  c++  java
  • 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 });
  • 相关阅读:
    mysql--数据库的基本操作(二)
    mysql--数据库剧本指令操作
    poj_3461 KMP算法解析
    POJ_3122 经典二分题
    LIS(最长上升子序列)的 DP 与 (贪心+二分) 两种解法
    HDU_1059 多重背包问题
    HDU-1114 完全背包+恰好装满问题
    HDU _2546 01背包问题
    POJ-1611 并查集
    HDU——Monkey and Banana 动态规划
  • 原文地址:https://www.cnblogs.com/knightshibiao/p/3826561.html
Copyright © 2011-2022 走看看