专业编程基础技术教程

网站首页 > 基础教程 正文

通用js分页方法(js分页页数过多怎么办)

ccvgpt 2024-07-18 12:48:48 基础教程 3 ℃
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;//初始url
var 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_number
else{
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_number
else{
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; //获取整个url
var 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}

Tags:

最近发表
标签列表