zoukankan      html  css  js  c++  java
  • 记kkpager分页控件的使用

    kkpager支持异步加载分页;

    1、页面添加div标签和引用JS,默认标签为<div id="kkpager"></div>

    引用JS和样式

    <script type="text/javascript" src="../global/src/kkpager.js"></script>
    <link rel="stylesheet" type="text/css" href="../global/src/kkpager_blue.css" />

    2、渲染数据

     1                     //加载分页控件
     2                     kkpager.generPageHtml({
     3                         //pagerid: 'kkpager1',
     4                         mode: 'click',
     5                         pno: 1,
     6                         //总页码
     7                         total: data.totalPage,
     8                         //总数据条数
     9                         totalRecords: data.totalCount,
    10 
    11                         //点击跳转分页的处理
    12                         click: function (n) {
    13 
    14                             $('#J-grid-cont').empty();
    15                             $('#kkpager').empty();
    16                             $.ajax({
    17                                 url: "/MarketPlan/GetUnoccupiedMarketJsons",
    18                                 data: { Keyword: $('#J-Search-Keyword').val(), pageIndex: n },
    19                                 success: function (data) {
    20                                     console.log(data);
    21                                     setData($('#J-grid-cont'), data.res.Result, true);
    22                                     //加载分页控件
    23                                     kkpager.generPageHtml({
    24                                         //pagerid: 'kkpager1',
    25                                         mode: 'click',
    26                                         pno: n,
    27                                         //总页码
    28                                         total: data.totalPage,
    29                                         //总数据条数
    30                                         totalRecords: data.totalCount
    31 
    32                                     });
    33                                 },
    34                                 error: function (msg) {
    35                                     console.log(msg);
    36                                 }
    37 
    38                             });
    39 
    40                             this.selectPage(n);
    41                         },
    42                         
    43                     });
    View Code

    3、注意事项

    (1)多次使用分页控件时,分页的页数不会自动更新,默认使用第一次,需要更改源码

    1             if (enforceInit || !this.inited) {
    2                 this.init(config);
    3 
    4                 config.total = kkpager.total;
    5                 config.totalRecords = kkpager.totalRecords;
    6             }
    View Code

    (2)注意页码的问题

    4、参考链接

    (1)https://github.com/pgkk/kkpager

  • 相关阅读:
    【java】关于泛型修饰符
    【java】使用lambda和函数接口Comparator
    【js】简单模拟JQuery原理
    【js】事件捕获与冒泡 (这可能是这个知识点 字最少,且讲的最清楚的教程)
    【js】实现 鼠标按下并未松开 事件
    【js】多维排序
    【JS】 初识JS原型
    【MyBatis】逆向工程
    【Struts】struts的DevMode模式
    Linux下gcc相关
  • 原文地址:https://www.cnblogs.com/zqllove/p/5146225.html
Copyright © 2011-2022 走看看