前言：
眼前我们对“js前端分页”大约比较关切，我们都想要了解一些“js前端分页”的相关知识。那么小编同时在网上网罗了一些对于“js前端分页””的相关知识，希望同学们能喜欢，你们快快来学习一下吧！JS代码：/** 分页方法* author:Mr.X* time:2017/12/27*/Request = GetRequest();var searchType = $("#search_type").val();var key= Request[searchType];var keyIndex = key.lastIndexOf('.');if(keyIndex != -1){key = key.substring(0, keyIndex)}var IFRAME_SRC="http://"+window.location.host+"/search/"+searchType+"/"+key;//初始urlvar page=Request['p'];//获取url中的地址参数if(page==null||page==""){page=1;}var limit=12;//每页限制条数var page_all="";//总页数$(document).ready(function (){page_list();});function page_list(){var count=$("#page_count").html();//新闻总数var remainder=count%limit;//判断是否有余数，有余数的话，整除后，余数+1，就是总页数；如果余数为0，即为整除，则整除后的的数即为总页数if(count<=limit){//总数达不到每页显示的条数，则不显示页码}else{//总数超过一页，即总数超过limit规定的条数，显示分页//先判断余数为0的情况：如果余数为0，即为整除，则整除后的的数即为总页数if(remainder==0){var page_number=count/limit;//总页码数page_number=parseInt(page_number);//将页码数由字符串类型转换为整形page_all=page_number;//如果页码数不超过5，则显示全部分页总数if(page_number<6){page=parseInt(page);//将获取到的页码数转换成整数var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//尾页if(page==1){//如果页码page=1，则隐藏上一页//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{//如果页码page不是1，则显示首页和上一页$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}//对页码进行赋值for(var i=0; i<page_number; i++){var j=i+1;var url=IFRAME_SRC+'/p/'+j;if(page==j){//如果是当前页，则给当前页加上active$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{//如果不是当前页，则去掉active$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}//page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;//下一页if(page==page_number){//如果是最后一页，则隐藏下一页功能//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{//如果不是最后一页，则显示最后一页和尾页$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}//如果页码超过5，则分块显示:点击第一页，显示：1/2/3/4/5/..page_number,点击第二页，显示：1/2/3/4/5/..page_number,点击第三页，显示：1/2/3/4/5/..page_number,点击第四页：显示：1/2/3/4/5/..page_number,点击第五页，显示：1...3/4/5/6/7/..page_number;点击page_number,显示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_numberelse{if(page==1||page==2||page==3||page==4){page=parseInt(page);//将字符串转换为整形var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页if(page==1){//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}for(var i=0; i<page_number; i++){if(i>4){$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");break;}var j=i+1;var url=IFRAME_SRC+'/p/'+j;//$(window.parent.document).find("#tab_13 iframe").attr("src",url); //url=$(window.parent.document).find("#tab_13 iframe").attr("src");if(page==j){$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;if(page==page_number){//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){page=parseInt(page);//将字符串转换为整形var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页if(page==1){//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");for(var i=page_number-4; i<page_number+1; i++){var j=i;var url=IFRAME_SRC+'/p/'+j;if(page==j){$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;if(page==page_number){//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}else{page=parseInt(page);//将字符串转换为整形var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页if(page==1){//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");for(var i=page-3; i<page+2; i++){var j=i+1;var url=IFRAME_SRC+'/p/'+j;if(page==j){$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;if(page==page_number){//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}}$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>页</span>");$("#page_list").append("<button type='button' id='change_page'>确定</button>");}//如果余数不为0，则将整除后的整数+1，即为总页码else{var page_number=count/limit;page_number=parseInt(page_number);page_number=page_number+1;page_all=page_number;//如果页码数不超过5，则显示全部分页总数if(page_number<6){page=parseInt(page);//将获取到的页码数转换成整数var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//尾页if(page==1){//如果页码page=1，则隐藏上一页 //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{//如果页码page不是1，则显示首页和上一页$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}//对页码进行赋值for(var i=0; i<page_number; i++){var j=i+1;var url=IFRAME_SRC+'/p/'+j;if(page==j){//如果是当前页，则给当前页加上active$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{//如果不是当前页，则去掉active$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}//page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;//下一页if(page==page_number){//如果是最后一页，则隐藏下一页功能 //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{//如果不是最后一页，则显示最后一页和尾页$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}//如果页码超过5，则分块显示:点击第一页，显示：1/2/3/4/5/..page_number,点击第二页，显示：1/2/3/4/5/..page_number,点击第三页，显示：1/2/3/4/5/..page_number,点击第四页：显示：1/2/3/4/5/..page_number,点击第五页，显示：1...3/4/5/6/7/..page_number;点击page_number,显示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_numberelse{if(page==1||page==2||page==3||page==4){page=parseInt(page);//将字符串转换为整形var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页if(page==1){//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}for(var i=0; i<page_number; i++){if(i>4){$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");break;}var j=i+1;var url=IFRAME_SRC+'/p/'+j;if(page==j){$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;if(page==page_number){//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){page=parseInt(page);//将字符串转换为整形var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页if(page==1){//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");for(var i=page_number-4; i<page_number+1; i++){var j=i;var url=IFRAME_SRC+'/p/'+j;if(page==j){$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;if(page==page_number){//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}else{page=parseInt(page);//将字符串转换为整形var page_pre=page-1;var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一页var url_index=IFRAME_SRC+'/p/'+1;//首页var url_last=IFRAME_SRC+'/p/'+page_number;//最后一页if(page==1){//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一页</a></li>");}$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");for(var i=page-3; i<page+2; i++){var j=i+1;var url=IFRAME_SRC+'/p/'+j;if(page==j){$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");}}$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");page=parseInt(page);var page_next=page+1;var url_next=IFRAME_SRC+'/p/'+page_next;if(page==page_number){//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一页</a></li>");}else{$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一页</a></li>");$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾页</a></li>");}}}$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>页</span>");$("#page_list").append("<button type='button' id='change_page'>确定</button>");}}}//跳转的到某一页$(document).on("click","#change_page",function(){var page_num=$("#selcet_page").val();page_num=parseInt(page_num);//将字符串转换为整形 //go_text=page_num; //alert(page_num);if(page_num>page_all){/*$('.success_message').show(); $("#message_info").html('页码超出范围，请输入正确页码'); */alert('页码超出范围，请输入正确页码');return false;}if((/^(\+|-)?\d+$/.test( page_num ))&&page_num>0){ location.href=IFRAME_SRC+"/p/"+page_num;}else{ /* $('.success_message').show(); $("#message_info").html('非法页码，请输入正确页码');*/ /*alert('非法页码，请输入正确页码');*/layer.msg("非法页码，请重新输入",{time: 2000});return false;}//$("#selcet_page").html(go_text);});//获取url参数function GetRequest() {var url = location.href; //获取整个urlvar theRequest = new Object();if (url.indexOf("/") != -1) {var str = url.substr(7);strs = str.split("/");for(var i = 0; i < strs.length; i ++) {if(i==0){}else{theRequest[strs[i]]=decodeURIComponent(strs[i+1]);i=i+1;}}}return theRequest;}//输入框只能输入数字$(function(){var bind_name = 'input';if (navigator.userAgent.indexOf("MSIE") != -1) {//ie情况下特殊处理bind_name = 'propertychange';}$('#selcet_page').bind(bind_name,function(){var value = $("#selcet_page").val();if((/^(\+|-)?\d+$/.test( value ))&&value>0&&value<(page_all+1)){}else{$("#selcet_page").val("");return false;}});})HTML代码：<section class="page mt30 mb30">{php}if(isset($count)){{/php}<div id="page_count" style="display:none;">{$count}</div> <div class="dataTables_paginate paging_simple_numbers col-xs-12 marbtm10" id="example_paginate"> <ul class="pagination" id="page_list"> </ul> </div>{php}}{/php}</section>CSS代码：#example_paginate{display: inline-block}.pagination>li{ display: inline-block;margin-right: 10px;padding: 5px 10px;cursor: pointer}.pagination>li>a{color: #fff}.pagination>li.active,.pagination>li:hover,#example_next:hover,#example_previous:hover{ background: #fdc74a;}#change_page:hover{background-color:#f26c1d;cursor: pointer}#selcet_page{ background: #fff;padding: 4px 10px;width: 4em;text-align: center;}#example_next,#example_previous{background: #fff}#example_next>a,#example_previous>a{color: #ff9530}#example_next:hover>a,#change_page:hover>a{color: #fff}#change_page{ background-color: #fdc74a;padding: 4px 10px;color: #fff;height: 29px;display: inline-block;margin-left: 10px;}#goto-page{padding-right: 5px;color: #fff;}#go-page{padding-left: 5px;color: #fff;}.shownum{color: #fff;margin-right: 20px;}.shownum>a{padding: 4px 10px;margin-right: 5px} 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js前端分页
