zoukankan      html  css  js  c++  java
  • 自己写的分页js分页插件 很low很实用

    var paginator = function(){
    this.number_of_pages;
    this.show_per_page;
    this.number_of_items;
    this.tab1_current_page;
    this.paginatorHelp;
    this.index;
    this.scoreData;
    }
    paginator.prototype.getPageDataAndSetPaginatorNum = function(data,ind,pth){
    this.paginatorHelp = pth;
    this.index = ind;
    this.show_per_page = 5;
    this.scoreData = data;
    this.number_of_items = data.length;
    this.number_of_pages = Math.ceil(this.number_of_items/this.show_per_page);
    $("#totalNum"+this.index).html("共<br />"+this.number_of_pages+"<br />页");
    var page_div_html = "";
    page_div_html += '<div id="tab'+this.index+'1"class="paginator_selected_num" onclick="'+this.paginatorHelp+'.goto_page('+1+');">'+1+'</div>';
    for(var i = 2; i <= this.number_of_pages && i<= 5; i++){
    page_div_html += '<div id="tab'+this.index+i+'"class="paginatorNum" onclick="'+this.paginatorHelp+'.goto_page('+i+');">'+i+'</div>';
    }
    $("#pdt"+this.index+"div").html(page_div_html);
    this.tab1_current_page = 1;
    var startNum = (this.tab1_current_page-1)*this.show_per_page;
    var endNum = this.tab1_current_page*this.show_per_page;
    return this.scoreData.slice(startNum, endNum);
    }
    paginator.prototype.goto_page = function(page_num){
    this.move_page_num(page_num);
    $("#tab"+this.index+this.tab1_current_page).removeClass();
    $("#tab"+this.index+this.tab1_current_page).addClass('paginatorNum');
    this.tab1_current_page=page_num;
    $("#tab"+this.index+page_num).addClass('paginator_selected_num');
    var startNum = (page_num-1)*this.show_per_page;
    var endNum = (page_num)*this.show_per_page;
    $("#tab1content").html($.createElement(this.scoreData.slice(startNum, endNum)));
    }
    paginator.prototype.move_page_num = function(page_num){
    if($('#tab'+this.index+page_num).prev().length==false && page_num != 1){
    var page_div_html = "";
    for(var i = page_num - 1; i <= page_num + 3; i++){
    page_div_html += '<div id="tab'+this.index+i+'"class="paginatorNum" onclick="'+this.paginatorHelp+'.goto_page('+i+');">'+i+'</div>';
    }
    $("#pdt"+this.index+"div").html(page_div_html);
    }
    if($('#tab'+this.index+page_num).next().length==false && page_num != this.number_of_pages){
    var page_div_html = "";
    for(var i = page_num - 3; i <= page_num + 1 ; i++){
    page_div_html += '<div id="tab'+this.index+i+'"class="paginatorNum" onclick="'+this.paginatorHelp+'.goto_page('+i+');">'+i+'</div>';
    }
    $("#pdt"+this.index+"div").html(page_div_html);
    }
    }
    paginator.prototype.prev = function(){
    if(this.tab1_current_page > 1)
    this.goto_page(this.tab1_current_page-1);
    }
    paginator.prototype.next = function(){
    if(this.tab1_current_page < this.number_of_pages)
    this.goto_page(this.tab1_current_page+1);
    }

    .paginatorDiv{
    position: absolute;
    height: 240px;
    35px;
    left: 94%;
    top: 14%;
    }
    .uparrow{
    background:url(images/layout_arrows.png);
    background-repeat:no-repeat;
    background-position:-13px -15px;
    height:16px;
    24px;
    margin-left: auto;
    margin-right: auto;
    }
    .downarrow{
    background:url(images/layout_arrows.png);
    background-repeat:no-repeat;
    background-position: -13px 0px;
    height:16px;
    24px;
    margin-left: auto;
    margin-right: auto;
    }
    .paginatorNum{
    24px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
    .paginator_selected_num{
    24px;
    height: 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: blue;
    color: white;
    }

    <div id="tab2content" class="hotvideo">
    </div>
    <div id="paginatorDivtab1" class="paginatorDiv" style="display: none;">
    <div class="uparrow" onclick="paginatorHelp1.prev();"></div>

    <div id="pdt1div"></div>

    <div class="downarrow" onclick="paginatorHelp1.next();"></div>
    <div id="totalNum1" style="text-align: center;"></div>
    </div>
    <div id="paginatorDivtab2" class="paginatorDiv">
    <div class="uparrow" onclick="paginatorHelp2.prev();"></div>

    <div id="pdt2div"></div>

    <div class="downarrow" onclick="paginatorHelp2.next();"></div>
    <div id="totalNum2" style="text-align: center;"></div>
    </div>

    paginatorHelp1 = new paginator();
    $("#tab1content").html($.createElement(paginatorHelp1.getPageDataAndSetPaginatorNum(data.data,"1","paginatorHelp1")));

    paginatorHelp2 = new paginator();
    $("#tab2content").html($.createElement(paginatorHelp2.getPageDataAndSetPaginatorNum(data.data,"2","paginatorHelp2")));

  • 相关阅读:
    CSS标题省略号带后缀名称
    vue post下载
    PiNetwork – 国外手机挖矿,目前国外热度很高
    iview table expand 单击当前行控制
    iview 开关变化时控制状态的变更
    CSS伪元素before,after制作左右横线中间文字效果
    idea 修改代码自动编译
    如何获取微信公众号的关注链接?
    震惊,微信小程序可以设置网络字体!真香
    小程序字体大小怎么设置,小程序修改字体样式方法
  • 原文地址:https://www.cnblogs.com/hyp5490-/p/5116150.html
Copyright © 2011-2022 走看看