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）;}}}}）;}

效果如下图：

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