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")));

  • 相关阅读:
    前端代码异常日志收集与监控
    基于window.onerror事件 建立前端错误日志
    MySQL数据类型和常用字段属性总结
    MySQL中char(36)被认为是GUID导致的BUG及解决方案
    dl,dt,dd,ul,li,ol区别
    泛型
    EF里Guid类型数据的自增长、时间戳和复杂类型的用法
    EF里的默认映射以及如何使用Data Annotations和Fluent API配置数据库的映射
    EF里的继承映射关系TPH、TPT和TPC的讲解以及一些具体的例子
    SQL JOIN
  • 原文地址:https://www.cnblogs.com/hyp5490-/p/5116150.html
Copyright © 2011-2022 走看看