JavaScript自定义分页样式

自定义分页样式，不多废话，直接上代码~

html部分

  
  
    

      

 
 
   
购买日期
 
   
门票名称
 
   
比赛时间
 
   
比赛选手
 
   
门票数量
  
      
      

      
    
 
  

js部分

function testFun(){
  var data = [
 ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
 ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
 ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
 ["哈哈","呵呵","嘿嘿","啦啦","耶耶"],
      ];
  var inner = [];
  for(var i=0; i<10; i++){
    var trList = ''
 +''+data[i][0]+''
 +''+data[i][1]+''
 +''+data[i][2]+''
 +''+data[i][3]+''
 +''+data[i][4]+''
 +'';
    inner.push(trList);
  }
  //分页方法调用
  myPagination(my_id,inner,10);  
}



function myPagination(a,inner,PageSize){
  var pageNum = ''
 +''
 +'第页'
 +'共页'
 +'每页有条消息'
 +'当前为第-条消息'
 +''   
 +'';
  $(a).append(pageNum);
  $(a).find(".pagination").css({
    "height": "100%",
    "width": "58%",
    "float": "left",
    "padding": "3px 10px", 
    "background-color": "#fff",
    "margin": "0"
  });
  $(a).find(".setpage").css({
    "height": "100%",
    "width": "100%",
    "line-height": "30px",
    "margin": "0 auto"
  });
  $(a).find(".setpage span").css({
    "float": "left",
    "padding": "0 5px"
  });
  $(a).find(".setpage font").css({
    "color": "#DD4449",
    "padding": "0 5px"
  });
  $(a).find(".setpage input").css({
    "width": "50px",
    "float": "left",
    "border-radius":"5px"
  });
  //分页
  var Count = inner.length;//记录条数 
  var PageSize=PageSize;//设置每页示数目 
  var PageCount=Math.ceil(Count/PageSize);//计算总页数 
  var currentPage =1;//当前页，默认为1。

  $(a).find(".pagesize").html(PageSize);//显示每页示数目 
  $(a).find(".setpage .current_1").html("1");//默认当前条数1
  $(a).find(".setpage .current_2").html(PageSize);//默认当前条数2
  //设置输入页面框的范围,并设置初始值
  $(a).find(".currentpage").val(currentPage)  
  //显示默认页（第一页） 
  for(i=(currentPage-1)*PageSize;iPageCount){      
      $(a).find("tbody").html('没有更多的消息......');
    }else{     
      var currentpage = $(this).val();
      $(a).find("tbody").html('');
      for(i=(currentpage-1)*PageSize;i

效果如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。