博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前台js分页,自己手写逻辑
阅读量:6825 次
发布时间:2019-06-26

本文共 7152 字,大约阅读时间需要 23 分钟。

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 = "
    "; //计算当前有多少页 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
    ' +'

    '+dateTime(success.rows[i].dtime)+'

    ' +'
    ' +'

    有关“'+success.rows[i].title+'”的新闻动态

    ' +'

    '+success.rows[i].newsAbstract+'

    ' } xwzxHtml += "
"; //分页 xwzxHtml += '
' +'
首页' +'
上一页'; //如果总页数大于设置的页数,则 if(pageTotal>pageLimit){ for(var i=0;i
'+(i+1)+''; } xwzxHtml += '
......'; }else{ for(var i=0;i
'+(i+1)+''; } } xwzxHtml += '
下一页' +'
尾页' +'
'; $('.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

2016年10月

result_re = day + "

" + 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 = "

    "; for(var i = 0;i
    ' +'

    '+dateTime(success.rows[i].dtime)+'

    ' +'
    ' +'

    有关“'+success.rows[i].title+'”的新闻动态

    ' +'

    '+success.rows[i].newsAbstract+'

    ' } xwzxHtml += "
"; //分页 xwzxHtml += '
' +'
首页' +'
上一页'; if(pageTotal > pageLimit){ //判断如果是小于当前页数 if(currentPage
'+(i+1)+''; } xwzxHtml += '
......'; //判断尾页 }else if(pageTotal<(currentPage+Math.ceil(pageLimit/2))){ xwzxHtml += '
......'; for(var i=(pageTotal-pageLimit);i
'+(i+1)+''; } //判断中间页 }else{ xwzxHtml += '
......'; for(var i=(currentPage-Math.ceil(pageLimit/2)+1);i<(pageLimit+currentPage-Math.ceil(pageLimit/2)+1);i++){ xwzxHtml += '
'+(i+1)+''; } xwzxHtml += '
......'; }// for(var i=0;i
'+(i+1)+'';// } }else{ for(var i=0;i
'+(i+1)+''; } } xwzxHtml += '
下一页' +'
尾页' +'
'; $('.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"%><%@ include file="common/head.jsp"%>${company.websitesName }— 新闻资讯列表    
您现在所处的位置:
--信息技术服务有限公司>
新闻资讯

新闻资讯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;}

 

转载地址:http://ugezl.baihongyu.com/

你可能感兴趣的文章
Java注解不完全总结
查看>>
解决“此电脑上没有安装True Speech声音解码器”的方法
查看>>
Win08R2变脸Win7第一招配置Owner信息
查看>>
远程桌面连接 详细图解
查看>>
Linux下查看文件和文件夹大小
查看>>
redis总结
查看>>
CsGL着色的三角形
查看>>
后端码农谈前端(CSS篇)第七课:定位与浮动
查看>>
springboot(十八):使用Spring Boot集成FastDFS
查看>>
何勉:第一性原理和精益敏捷的规模化实施
查看>>
HDFS 文件格式——SequenceFile RCFile
查看>>
处理 Oracle SQL in 超过1000 的解决方案
查看>>
精致的JS提示
查看>>
Visual Studio.Net 2005中用SqlDataSource处理数据库特殊数据类型
查看>>
MySQL---数据库从入门走向大神系列(十四)-ComboPooledDataSource(C3P0连接池配置)
查看>>
11.3、Libgdx的音频之播放PCM音频
查看>>
你真的会玩SQL吗?之逻辑查询处理阶段
查看>>
Redis集群明细文档(转)
查看>>
开源Math.NET基础数学类库使用(14)C#生成安全的随机数
查看>>
Linux之shell编程基础
查看>>