JavaScript自定义分页样式
更新时间:2017年01月17日 16:05:30 作者:牧羊人_cily
这篇文章主要为大家详细介绍了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); } } } }); }
效果如下图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Javascript 的addEventListener()及attachEvent()区别分析
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这里就大概介绍一下avascript的Event用法.2009-05-05JavaScript中windows.open()、windows.close()方法详解
这篇文章主要介绍了JavaScript中windows.open()、windows.close()方法详解 的相关资料,需要的朋友可以参考下2016-07-07js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
下面小编就为大家带来一篇js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10
最新评论