js自定义分页

2017-01-04 19:27:25来源:CSDN作者:qq_29326717人点击

自定义分页
不多废话,直接上代码~
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(recharge_record,inner,10); }/* * 分页 * a传入的是id * inner传入的是列表内容 * PageSize每页显示的数目 */function myPagination(a,inner,PageSize){    var pageNum = '<div>'                +'<div>'                +'<span>第</span><input type="text"><span>页</span>'                +'<span>共<font></font>页</span>'                +'<span>每页有<font></font>条消息</span>'                +'<span>当前为第<font></font>-<font></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);                }            }        }    });}

效果如下图:
这里写图片描述

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台