js自定义分页

自定义分页
不多废话，直接上代码~
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);
                }
            }
        }
    });
}

效果如下图：