前台js分页，自己手写逻辑

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量344 收藏
点赞数
文章标签： 前端 javascript xhtml ViewUI

js代码如下：

//设置分页
var pageSize = 10;
//设置一次显示多少页
var pageLimit = 5;
$(function(){
    //查询所有内容
    $.post(ctx + '/websites/queryListForPage',{navId:company.xwzx.id,start:0,limit:pageSize},function(success){
        if(success.results==0){
            return;
        }
        //清空新闻资讯列表
        var xwzxHtml = "<ul>";
        //计算当前有多少页
        var pageTotal = Math.ceil(success.results/pageSize);
        //当前页数
        var currentPage = 0;
        //临时变量，比较数目大小
        var count = 0;
        //比较当前应显示多少数据
        if(success.results<=pageSize){
            count = msg.length;
        }else{
            count = pageSize;
        }
        for(var i = 0;i<success.rows.length;i++){
            xwzxHtml += '<li class="newsList_li">'
                +'<a href="xwzxDetail?contentId='+success.rows[i].id+'"><div class="newsList_date">'
                +'<p class="newsList_day">'+dateTime(success.rows[i].dtime)+'</p></div>'
               +'<div class="newsList_intro">'
                  +'<h3>有关“'+success.rows[i].title+'”的新闻动态</h3>'
                  +'<p>'+success.rows[i].newsAbstract+'</p></div></a></li>'
        }
        xwzxHtml += "</ul>";
        //分页
        xwzxHtml += '<div class="newsList_page">'
                +'<a href="javascript:void(0)" οnclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
                +'<a href="javascript:void(0)" οnclick="changePage('+((0-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
        //如果总页数大于设置的页数，则
                if(pageTotal>pageLimit){
                    for(var i=0;i<pageLimit;i++){
                        xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                    xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                }else{
                    for(var i=0;i<pageTotal;i++){
                        xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                }
        xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+((0+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
                   +'<a href="javascript:void(0)" οnclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
                +'</div>';
        $('.yzIntro_row').html(xwzxHtml);
    });
});
//将后台传过来的时间转换成年月日时分秒
function dateTime(obj){
        var mmsecond = obj;
        var result = [60,60,24];
        var flag;
        var result_re = "";
        mmsecond = Math.floor(mmsecond/1000);
        //变成秒单位,但是不操作
        var i;
        //下面这个for计算时分秒
        for(i=0;i<3;i++){
            flag = Math.floor(mmsecond%result[i]);
            mmsecond = Math.floor(mmsecond/result[i]);
            if(flag < 10){
                result_re = "0"+flag +":"+ result_re;
            }else{
                result_re = flag +":"+ result_re;
            }
        }
        //去掉最后的一个冒号
        result_re = result_re.substring(0,result_re.length-1);
        //下面计算年月日
        var year,month,day;
        var everyMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
        //计算年
        flag = Math.floor(mmsecond/365);
        year = 1970 - 0 + flag;
        mmsecond = Math.floor(mmsecond%365);
        //计算月和日
        for(i=0;i<12;i++){
        //判断闰月
            if(((year%4 == 0)&&(year%100 != 0)) || (year%400 == 0)){
                if(mmsecond == 59){
                    month = "02";
                    day = "29";
                    break;
                }
            }
            if(mmsecond > everyMonth[i]){
                mmsecond -= everyMonth[i];
            }else{
                month = i+1;
                day = mmsecond;
                month = month >10?month:"0"+month;
                day = day>10?day:"0"+day;
            }
        }
        //拼起来 05</p><p>2016年10月</p>
        result_re = day + "</p><p>" + year + "年" + month + "月";
        return result_re;
    }
function changePage(start,pageTotal,currentPage){
    if(start<0){
        start = 0;
        currentPage+=1;
    }
    if(currentPage>pageTotal){
        start = start - pageSize;
        currentPage-=1;
    }
    $.ajaxSetup({async : false}); 
    $.post(ctx + '/websites/queryListForPage',{start:start,limit:pageSize,navId:company.xwzx.id},function(success){
        if(success.results==0){
            return;
        }
        //清空新闻资讯列表
        var xwzxHtml = "<ul>";
        for(var i = 0;i<success.rows.length;i++){
            xwzxHtml += '<li class="newsList_li">'
                +'<a href="xwzxDetail?contentId='+success.rows[i].id+'"><div class="newsList_date">'
                +'<p class="newsList_day">'+dateTime(success.rows[i].dtime)+'</p></div>'
               +'<div class="newsList_intro">'
                  +'<h3>有关“'+success.rows[i].title+'”的新闻动态</h3>'
                  +'<p>'+success.rows[i].newsAbstract+'</p></div></a></li>'
        }
        xwzxHtml += "</ul>";
        //分页
        xwzxHtml += '<div class="newsList_page">'
                +'<a href="javascript:void(0)" οnclick="changePage('+0+','+pageTotal+','+0+')">首页</a>'
                +'<a href="javascript:void(0)" οnclick="changePage('+((currentPage-1)*pageSize)+','+pageTotal+','+(currentPage-1)+')">上一页</a>';
                if(pageTotal > pageLimit){
                    //判断如果是小于当前页数
                    if(currentPage<Math.ceil(pageLimit/2)){
                        for(var i=0;i<pageLimit;i++){
                            xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                    //判断尾页
                    }else if(pageTotal<(currentPage+Math.ceil(pageLimit/2))){
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                        for(var i=(pageTotal-pageLimit);i<pageTotal;i++){
                            xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                    //判断中间页
                    }else{
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                        for(var i=(currentPage-Math.ceil(pageLimit/2)+1);i<(pageLimit+currentPage-Math.ceil(pageLimit/2)+1);i++){
                            xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                        }
                        xwzxHtml += '<a style="cursor: not-allowed;">......</a>';
                    }
//                    for(var i=0;i<pageLimit;i++){
//                        xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
//                    }
                }else{
                    for(var i=0;i<pageTotal;i++){
                        xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+(i*pageSize)+','+pageTotal+','+i+')">'+(i+1)+'</a>';
                    }
                }
        xwzxHtml += '<a href="javascript:void(0)" οnclick="changePage('+((currentPage+1)*pageSize)+','+pageTotal+','+(currentPage+1)+')">下一页</a>'
                +'<a href="javascript:void(0)" οnclick="changePage('+((pageTotal-1)*pageSize)+','+pageTotal+','+(pageTotal-1)+')">尾页</a>'
                +'</div>';
        $('.yzIntro_row').html(xwzxHtml);
        $('.newsList_page >a').each(function(){
            if((currentPage+1)==$(this).html()){
                $(this).css('background','#2688c3');
                $(this).css('color','#fff');
            }
        });
    });
}

jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="common/head.jsp"%>
<script type="text/javascript" src="${ctx}/plugins/yz/web/resources/js/xwzx.js"></script>
<title>${company.websitesName }— 新闻资讯列表</title>
</head>

<body>
    <!--top-->
    <jsp:include page="common/header.jsp" />
    <!--slide-->
    <div class="yzjjfa_slide yzNews_slide"><a href="javascript:window.location.href='xwzx'"><img src="../plugins/yz/web/resources/imgs/newsSlideImg.png" /></a> </div>
    <!--position-->
    <div class="yzContain yzjjfa_posi">
        <img src="../plugins/yz/web/resources/imgs/posIcon.png" />
        您现在所处的位置：<a href="javascript:window.location.href='index'">--信息技术服务有限公司</a>&gt;
        <a href="javascript:window.location.href='xwzx'">新闻资讯</a>
    </div>
    <!--content-->
    <div class="yzContain yzjjfa_content">
        <p class="yzSepea_line yzNews_line"></p>
        <div class="yzIntro_row">
            
        </div>
    </div>
<jsp:include page="common/footer.jsp" />
</body>
</html>

新闻资讯css如下：

/*-------新闻资讯------*/
.yzNews_rightTitle{ background: url("../imgs/newsTitle_icon.png") no-repeat scroll left center; margin-top:-20px;}
.yzNews_rightUl > li{ background: url("../imgs/newsList_icon.png") no-repeat scroll left 11px; height:30px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.yzNews_line{ margin-bottom:40px;}
.newsList_li{ height:90px; padding:20px 15px 20px; border-bottom:dashed 1px #eaeaea;}
.newsList_li>a:hover>.newsList_intro>p,.newsList_li>a:hover>.newsList_intro>h3{ color:#2688c3;}
.newsList_date{ width:80px; height:70px; text-align:center;  background:#f0f0f0; float:left; padding:10px 5px;}
.newsList_day{ width:100%; height:30px; line-height:30px; font-size:24px; margin-bottom:12px; }
.newsList_intro{ width:1050px; height:90px; float:left; margin-left:30px; }
.newsList_intro>h3{ font-size:20px; font-weight: normal; margin-top:5px; }
.newsList_intro>p{ margin-top:10px; height:47px; overflow:hidden; line-height:23px; color:#555; }
.newsList_page{ margin-top:40px; float:right;}
.newsList_page>a{ display:inline-block; padding:5px 10px; border:solid 1px #2688c3; color:#2688c3; border-radius: 3px; margin-right:5px;}
.newsList_page>a:hover,.newsList_page>a:focus,.newsList_page>a:active{ background:#2688c3; color:#fff;}
.yzNews_slide{ padding-top:0;}

 

weixin_34004750
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SGG前台项目复习笔记
zhuxinggua的博客
05-28 421
前端Vue核心 开发一个前端模块可以概括为以下几个步骤： （1）写 静态页面、拆分为静态组件； （2）发送请求（API） （3）vuex （actions、mutations、state三连操作） （4）组件获取仓库数据，动态展示 1.pges文件夹 创建pages文件夹，并创建路由组件 1.1 在src下创建router文件夹，并创建index.js进行路由配置，最终在main.js中引入注册 1.2 总结 路由组件和非路由组件的区别 ： 非路由组件放在components中（全局组
笔记整理——Vue2项目尚品汇
Thaley的博客
01-01 2074
笔记整理——Vue2项目尚品汇
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
关于分页的一种实现方式--（js实现）
09-04 147
项目中用到列表的地方很多，二页面列表的显示必然要求分页， 所以分页和查询几乎密不可分，如果说你不会分页查询数据， 那你基本上还属于菜鸟。 分页的原理很简单，从sql上看就是从哪一条开始，往后差几条。 所以sql只需要传2个参数，这只是原理罢了，关键是实现。 而实现的方法就多了去了，架构师干这个是小菜一碟。 在我的项目中，关于分页架构师已经写好了一个管理分页的类， 这个类与sq...
用JavaScript实现分页功能
最新发布
qq_52530691的博客
07-01 1550
用JavaScript实现分页功能
js的一个分页逻辑
weixin_33758863的博客
05-06 649
2019独角兽企业重金招聘Python工程师标准>>> ...
js把数组分页显示(基本思路)
02-11
js把数组分页显示(基本思路) 请用非IE6浏览器浏览。 ：IE6未能正常显示：呵。不知为啥。没时间去改（重要的是思路）
js实现逻辑分页
weixin_43505216的博客
12-08 1702
js实现逻辑触底分页
【2020年数据分析岗面试题】不断更新...（含自己的理解、思考和简答）
汪雯琦的博客
03-30 8096
文章目录==偏统计理论知识==偏业务思维逻辑 偏统计理论知识 1. 扑克牌54张，平均分成2份，求这2份都有2张A的概率。 M表示两个牌堆各有2个A的情况：M=4(25!25!) N表示两个牌堆完全随机的情况：N=27!27! 所以概率为：M/N = 926/53*17 2.男生点击率增加，女生点击率增加，总体为何减少? 因为男女的点击率可能有较大差异，同时低点击率群体的占比增大。 如原来男性20...
.Net 面试题整理(一)
热门推荐
fuchenxuan blog
05-22 1万+
.Net 面试题整理(一) 好久的资料了，拿出来分享给大家，主要是记录一些面试题整理。Main函数是什么？在程序中使用Main函数有什么需要注意的地方？ Q：程序的入口函数！函数名字不能改变；一个程序中有且只有一个Main函数。 CLR是什么？程序集是什么？当运行一个程序集的时候，CLR做了什么事情？ Q:Common Language RunTime 公共语言运行时。 编译后代码的集合
模仿天猫实战【SSM】——总结
我没有三颗心脏的博客
05-07 3939
第一篇文章链接：模仿天猫实战【SSM版】——项目起步 第二篇文章链接：模仿天猫实战【SSM版】——后台开发 总结：项目从4-27号开始写，到今天5-7号才算真正的完工，有许多粗糙的地方，但总算完成了，比想象中的开发周期要久的多，并且大部分的时间都花在了前端页面的编写上…仅以此文来总结一下 项目总结 功能一览表 大致理了一下功能列表，应该是齐全的，其中推荐链...
纯JS分页不用任何控件，简单易懂
12-06
纯手写JS分页，第一次做分页，不用任何控件，简单易懂，尝试分享出来。
分页js插件
01-10
博文 http://blog.csdn.net/qq_34273222/article/details/54312975 中所需要的资源文件，有问题请留言。
JS实现的简单分页功能示例
10-18
主要介绍了JS实现的简单分页功能,涉及javascript事件响应及页面元素遍历、动态构造等相关操作技巧,需要的朋友可以参考下
js表格逻辑分页
weixin_46083166的博客
07-15 300
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table class="table"> <!--id与下面js对应--> <tbody id="idData" class="text-center"> &l.
js分页
qq_35176916的博客
12-04 1464
方法一 一： 先看效果图 二：主要功能： 上一页，下一页，跳转，尾页， 三： 代码 index.html: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="w
原生js实现分页逻辑
qq_62475501的博客
06-01 877
记录前端学习 JS实现逻辑触底分页逻辑分页是指从后台拿到所有数据，在前台页面实现分页，可以减少访问服务器的次数，但会添加内存关键变量： currentPage :当前页 maxVisiblePage :最大可视页数 beginPage :开始页数 endPage:最后一页数 totalPage :总页数 pageData :页码数据 html部分 js部分 最终效果
js实现数据分页算法
赵佳敏的博客
09-17 3022
数据分页算法一、分页算法二、百度分页算法三、带数据的分页算法 一、分页算法 <script> <!-- 分页的逻辑算法--> //当前页和总页码 var nowPage=10; var totlePage=20; var navEle=null; var up=null; var down=null; var totle=null; var go=null; var num=null; .
js模拟分页算法
快乐每一天
03-27 385
// j为序号从1开始 outputClassItem : function(j, room, ratePlans) { var html = new Array(); var pageClass = ""; console.log(j); for(var i = 1;i &lt;= 10;i++){ var num = (i - 1) * 4 + 1;...
纯手写Jsp+JavaScript实现分页示例
本资源是一份纯手写的JSP和JavaScript实现的分页实例文档，由Authortar（bigangell@yesky.com）提供。作者鼓励读者自由复制代码，但需保留作者信息，并在遇到问题时与其联系。为了演示效果，可以访问...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值