zoukankan      html  css  js  c++  java
  • 关于借助prototype进行分页的一个小插件

    (function (win, undefined) {
      var pagefen = win.pagefen = function (inforAllcount) {
      this.nowpage = 1; //当前页
      this.pagecount = 10; //一次性加载十条
      //总共有多少页
      this.pageAllcount = (inforAllcount % this.pagecount == 0 ? (inforAllcount / this.pagecount) : (parseInt(inforAllcount / this.pagecount) + 1));

    };
    //上一页的方法 (当前页,每页显示的条数)
    pagefen.prototype.uppage = function (nowpage, pagecount) {
      this.nowpage -= 1;
      this.nowpage = (this.nowpage == 0 ? 1 : this.nowpage)
      pagecontrol.seach(this.nowpage, this.pagecount);
    }
    //下一页的方法
    pagefen.prototype.nextpage = function (nowpage, pagecount) {
      this.nowpage += 1;
      this.nowpage = (this.nowpage == (this.pageAllcount + 1) ? this.pageAllcount : this.nowpage);
      pagecontrol.seach(this.nowpage, this.pagecount);
      }
    } (window));

    //查询方法
    var pagecontrol = {
      seach: function (nowpage, pagecount) {
      var pagefirst = (nowpage - 1) * pagecount + 1; //1条数据
      var pageend = nowpage * pagecount; //10条数据
      $('.addlistul li').hide();
      $('.addlistul li').slice(pagefirst - 1, pageend).show();
      }
    };

    $(function(){

      //此处是获取数据 添加进去ul里面的地方
      var ele = $('.addlistul');
      for (var i = 0; i < 100; i++) {
        ele.append("<li>" + (i + 1) + "</li>");
      }

      //实例化分页
      var pageMethod = new pagefen(100);
        pagecontrol.seach(1, 10);
      //上一页修改当前页加一
      $('.have_small').click(function () {
        pageMethod.uppage(this.nowpage, this.pagecount);
      });
      //下一页修改当前页减一
      $('.next_page').click(function () {
        pageMethod.nextpage(this.nowpage, this.pagecount);
      });

      //点击数字显示第几页的时候
      $('.num').click(function () {
        var getnumpage = parseInt($(this).text());

        //当前选中的页数然后调用查询方法

        pagecontrol.seach(getnumpage, 10);
        pageMethod.nowpage = getnumpage;
      });

    });

    <div class="r-h-3">
      <ul class="addlistul"></ul>
    </div>

  • 相关阅读:
    P4009 汽车加油行驶问题
    P2761 软件补丁问题
    P1251 餐巾计划问题
    P2766 最长不下降子序列问题
    P4011 孤岛营救问题
    P2765 魔术球问题
    P2770 航空路线问题
    P2762 太空飞行计划问题
    P2764 最小路径覆盖问题
    P3355 骑士共存问题
  • 原文地址:https://www.cnblogs.com/Hsong/p/6056777.html
Copyright © 2011-2022 走看看