JavaScript自定义分页样式

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

html部分

<div id="my_id">                
 <div class="my_id">
   <table style="">
     <thead style="">
       <tr>
         <td>购买日期</td>
         <td>门票名称</td>
         <td>比赛时间</td>
         <td>比赛选手</td>
         <td>门票数量</td>
        </tr>
     </thead>
     <tbody>
     </tbody>
   </table>
 </div>      
</div>

js部分

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

/*
* 分页
* a传入的是id
* inner传入的是列表内容
* PageSize每页显示的数目
*/
function myPagination(a,inner,PageSize){
 var pageNum = '<div class="pagination col-xs-12">'
       +'<div class="setpage">'
       +'<span>第</span><input type="text" class="currentpage" class="form-control"><span>页</span>'
       +'<span>共<font class="totalpage"></font>页</span>'
       +'<span>每页有<font class="pagesize"></font>条消息</span>'
       +'<span>当前为第<font class="current_1"></font>-<font class="current_2"></font>条消息</span>'
       +'</div>'          
       +'</div>';
 $(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;i<PageSize*currentPage;i++){  
   $(a).find("tbody").append(inner[i]);
 }
 $(a).find(".totalpage").html(PageCount);//总页数
 //显示输入页的内容
 $(a).find(".currentpage").change(function(){
   if($(this).val()<1||$(this).val()>PageCount){      
     $(a).find("tbody").html('<tr><td colspan="3">没有更多的消息......</td></tr>');
   }else{    
     var currentpage = $(this).val();
     $(a).find("tbody").html('');
     for(i=(currentpage-1)*PageSize;i<PageSize*currentpage;i++){
       $(a).find("tbody").append(inner[i]);
       $(a).find(".setpage .current_1").html((currentpage-1)*PageSize+1);
       if(PageSize*currentpage<Count){
         $(a).find(".setpage .current_2").html(PageSize*currentpage);
       }else{
         $(a).find(".setpage .current_2").html(Count);
       }
     }
   }
 });
}

效果如下图：