js分页

深碍√TFBOYSˉ_ 2022-06-17 12:39 198阅读 0赞

function initPagination(){
        if(total == 0){
            return;
        }
        var url = "./moreNews.jsp?type=" + type;
        var n = rows;
        var count = total;
        count = (count % n == 0) ? (count / n) : ((count / n) + 1);
        count = parseInt(count);
        $('.pages').append("<a href=\""+url+"\" class=\"firstPage\">首页</a>");
        $('.pages').append(
                "<a href=\"" + url + "&curPage=" + (curPage == 1 ? curPage : curPage - 1)
                        + "\" class=\"prevPage\">上一页</a>");
    
        if (curPage >= 1 & curPage <= 5) {
            if(count>5){
                for (var i = 1; i <= 5; i++) {
                    if (i == curPage) {
                        $('.pages').append(
                                "<span class=\"curPage\">" + curPage + "</span>");
                    } else {
                        $('.pages').append(
                                "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                        + "</a>");
                    }
                }
                $('.pages').append("<span>...</span>");
            }
            else {
                for (var i = 1; i <= count; i++) {
                    if (i == curPage) {
                        $('.pages').append(
                                "<span class=\"curPage\">" + curPage + "</span>");
                    } else {
                        $('.pages').append(
                                "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                        + "</a>");
                    }
                }
            }
        }
    
        else if (curPage<=count&curPage>(count - 5)) {
            $('.pages').append("<span>...</span>");
            for (var i = count - 4; i <= count; i++) {
                if (i == curPage)
                    $('.pages').append(
                            "<span class=\"curPage\">" + curPage + "</span>");
                else
                    $('.pages').append(
                            "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                    + "</a>");
            }
        }
    
        else {
            $('.pages').append("<span>...</span>");
            for (var i = curPage - 2; i <= curPage + 2; i++) {
                if (i == curPage)
                    $('.pages').append(
                            "<span class=\"curPage\">" + curPage + "</span>");
                else
                    $('.pages').append(
                            "<a href=\""+url+"&curPage="+i+"\" target=\"_self\">" + i
                                    + "</a>");
            }
            $('.pages').append("<span>...</span>");
        }
    
        $('.pages').append(
                "<a href=\"" + url + "&curPage="
                        + (curPage >= count ? curPage : curPage + 1)
                        + "\" class=\"nextPage\">下一页</a>");
        $('.pages').append(
                "<a href=\""+url+"&curPage="+count+"\" class=\"lastPage\">末页</a>");
    }

.pages { 
    	width:500px;
    	text-align: center;
    	margin: 0 auto;
    	background: #fff;
    	color: #000;
    	font: 12px/1.5em arial, tahoma, simsun;
    	overflow: hidden;
    	line-height: 38px;
    }
    
    .pages a {
    	vertical-align: middle;
    	border: 1px solid #cccccc;
    	color: black;
    	padding: 6px;
    	_padding: 5px;
    	margin: 0;
    	zoom: 1;
    	font-family: Arial;
    	text-decoration: none;
    }
    
    .pages a:hover {
    	background: #6198c6;
    	border: 1px solid #ddd;
    	color: #fff;
    }
    
    .pages span {
    	color: #888888;
    	padding: 7px;
    	position: relative;
    	top: 1px;
    	font-family: Arial;
    	margin: 0;
    	zoom: 1;
    }
    
    .pages span.curPage {
    	color: #fff;
    	background: #6198c6;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 js制作分页

迎大家一起交流学习n(\*≧▽≦\*)n 效果： ![20190910112111185.gif][] **图标引入方式为symbol引用** **html:**...

偏执的太偏执、/ 2024年04月18日 17:33/ 0 赞/ 87 阅读

相关 js 列表，分页

<pre name="code" class="javascript">$(document).ready(initPage); var pag

秒速五厘米/ 2022年09月23日 08:08/ 0 赞/ 197 阅读

相关 JS----dataTables分页排序

博客来源：[http://blog.csdn.net/damys/article/details/39076731][http_blog.csdn.net_damys_arti

青旅半醒/ 2022年08月18日 14:11/ 0 赞/ 332 阅读

相关 js分页

function initPagination(){ if(total == 0){ return; }

深碍√TFBOYSˉ_/ 2022年06月17日 12:39/ 0 赞/ 199 阅读

相关 js实现左右滑动分页

/ 以下为项目的左右滑动分页 / var startx, starty; //获得角度 function getAngle

﹏ヽ暗。殇╰゛Y/ 2022年06月08日 12:47/ 0 赞/ 338 阅读

相关 JS简单实现分页显示

> 完整代码源码可以在[这里][Link 1]下载 1.在 HTML文件建立列表目标节点和翻页器目标节点 <body>

冷不防/ 2022年04月05日 13:28/ 0 赞/ 437 阅读

相关 js数据分页

> 这个案例大概是半个月之前做的，由于当时做完以后觉得比较难以接受且不太好理解（代码也比较多一点），就先将它放下了，沉淀过后，我觉得是时候拿出来与大家分享了！整体思想框架：

绝地灬酷狼/ 2022年03月22日 15:10/ 0 赞/ 304 阅读

相关 JS实现前端分页

一、HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'>

Bertha 。/ 2022年02月19日 17:17/ 0 赞/ 350 阅读

相关 js分页（简单，暴力，迅捷）

引入两个文件即可，js，css文件文件可以去码云上取 [https://gitee.com/Feudallord/JSNativePaging][https

水深无声/ 2022年02月15日 08:48/ 0 赞/ 223 阅读

相关 vue.js 分页

先上样式的代码 <style> .fenye { font-weight: 900;height: 40px;text-align: center;color: 88

迈不过友情╰/ 2021年08月28日 17:07/ 0 赞/ 463 阅读