jq-数据列表的获取

其他 2018-06-30 09:22:13 阅读次数: 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/dynamic.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/serve.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/header.js"></script>
</head>
<body>
<header id="header" class="clearfix">
    <div class="center clearfix">
        <a href="javascript:;"><img src="img/logo.png" alt="享推,值得拥有"></a>
        <nav>
            <ul>
                <li class="nav"><a href="../part_one/home.html">首页</a></li>
                <li class="nav serve"><a href="../part_two/serve.html">服务</a>
                    <ul class="navS">
                        <li><a href="javascript:;">销售线索</a></li>
                        <li><a href="javascript:;">营销BPO服务</a></li>
                    </ul>
                </li>
                <li class="nav serve"><a href="javascript:;" style="padding: 29px 16px 0 16px;">产品&平台</a>
                    <ul class="navS">
                        <li><a href="javascript:;">销售预测平台</a></li>
                        <li><a href="javascript:;">销售自动化系统</a></li>
                        <li><a href="javascript:;">聚合平台</a></li>
                        <li><a href="javascript:;">许可营销系统</a></li>
                    </ul>
                </li>
                <li class="nav"><a href="../part_three/case.html">案例</a></li>
                <li class="nav  on5"><a href="javascript:;">动态</a></li> <!--  a标签内添加JavaScript阻止刷新否则出现闪退现象-->
            </ul>
        </nav>
        <div class="tel">
            <span class="ico">全国服务热线</span><br>
            <span class="telP">400-0505-811</span>
        </div>
    </div>
</header>
<div class="breadCrumbs">
    <div class="contentWidth"><a href="#">首页</a> &gt; 新闻动态 &gt;</div>
</div>
<!--模拟数据-->
<div class="center clearfix">
    <div class="left fl clearfix"></div>


    <div class="fr rankList bgWhite">
        <p class="rank_title">热门文章</p>
        <p class="listP"><span class=" tip">1</span><a href="javascript:;">　数赢云陈宏伟：打造营销力共...</a></p>
        <p class="listP"> <span class=" tip">2</span><a href="javascript:;">　数赢云CEO陈宏伟：坚守住初...</a></p>
        <p class="listP"> <span class=" tip">3</span><a href="javascript:;">　找到人类与机器的组合模...</a></p>
        <p class="listP"> <span class="hot ">4</span><a href="javascript:;">　营销自动化将会成为企业级服...</a></p>
        <p class="listP"> <span class="hot ">5</span><a href="javascript:;">　数赢云CEO陈宏伟：销售线...</a></p>
        <p class="listP"> <span class="hot ">6</span><a href="javascript:;">　销售线索挖掘剖析之“种子...</a></p>
        <p class="listP"> <span class="hot ">7</span><a href="javascript:;">　为什么需要营销自动...</a></p>
        <p class="listP"> <span class="hot ">8</span><a href="javascript:;">　享推科技斩获2016TopDigit...</a></p>
        <p class="listP"> <span class="hot ">9</span><a href="javascript:;">　销售线索分：让大数据...</a></p>
        <p class="listP"> <span class="hot ">10</span><a href="javascript:;">　销售线索分：让大数据...</a></p>
    </div>


</div>
<!--分页占位符-->
<ul class="fenYe">


</ul>




<footer>
    <div class="footerNav">
        <div class="center clearfix">
            <img src="img/logo_small.png" alt=""class="logo_small">
            <div>
                <ul>
                    <li><h4>产品&服务</h4></li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                </ul>


                <ul>
                    <li><h4>核心业务</h4></li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                    <li>销售线索</li>


                </ul>


                <ul>
                    <li><h4>动态咨询</h4></li>
                    <li>销售线索</li>
                </ul>


                <ul>
                    <li><h4>关于我们</h4></li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                </ul>


                <ul>
                    <li><h4>联系我们</h4></li>
                    <li>销售线索</li>
                    <li>销售线索</li>
                </ul>






            </div>
            <div class="footRight clearfix">
                <div class="footRightL" >
                    <img src="img/ftcode.jpg" alt="">
                    <span style="font: 12px/26px'微软雅黑';color:  #999999">微信公众号</span>
                </div>


                <div class="tel"style="float:left;">
                    <span class="ico"><i>☎</i>　 全国服务热线</span><br>
                    <span class="telP">400-0505-811</span><br>
                    <span class="time">周一至周五 09:00-18:00</span>
                </div>


            </div>
        </div>


    </div>
    <div class="footer">
        <span>@2007 上海数赢云网络科技有限公司 -版权所有 Copyright(c) data-win All Right Reserved. 沪ICP备15050471号-26</span><br>
        <span class="ico_01">工商网监</span>
        <span class="ico_02">诚信网站</span>
        <span class="ico_03">网信认证</span>
        <span class="ico_04">360网站卫士</span>
        <span class="ico_06">可信网站</span>
        <span class="ico_07"> 安全联盟</span>
    </div>
</footer>
<script>
    $(function (){
        //查询数据
        function getData(curPage){
            $.ajax({
                url: 'server/news.php',
                data:{curPage:curPage,pageNum:8},
                type: 'get',
                success: function (result){
                    result = JSON.parse(result);
                    console.log(result);
                    var temp = '';
                    for (var i = 0; i < result.data.length; i++) {
                        var obj = result.data[i];
                        temp += '<div class="news"> <div class="oImg fl">'+
                                '<img src=' + obj.url + ' >' +
                                '</div> <div class="oFont fr"> ' +
                                '<p class="news_title">' + obj.title + '</p><p class="news_subtitle">' + obj.date + '</p><p class="news_text">' + obj.content + '</p> <p class="news_bottom"> ' +
                                '<img src="imgs/eye.png" alt="" class="eye">阅读 <span>42</span> ' +
                                '<a href="#" class="fr more">查看更多&gt;&gt</a> ' +
                                '</p></div></div>'
                    }
                    $('.left').html(temp);
                }
            });
        }
        getData(1);


//    分页部分
        var startPage = 1;//起始页
        var currentPage = 1;//当前页
        var totalPage = 6;//总页数
        var num = 5;//每次显示多少页
        var before = 2;//前2
        var after = 2;//后2
        var count=1;
        //TODO step1: 根据当前页,判断输入需要显示的页面
        function updatePage(currentPage){
            //需要找出起始页,通过起始页和每次显示的页数找到结束页
            if(currentPage <= before){//如果当前页小于前3,那么其实你也都是1
                startPage = 1;
            }else if(currentPage > (totalPage-after)){
                startPage = totalPage - before - after;//如果当前页是后2页,那么都是固定的起始页
            }else{
                startPage = currentPage - before;//其他情况,起始页动态变化, 每次都比当前小3
            }


            var temp = '<li class="first"><img src="imgs/left.png" alt=""></li>';//缓存字符串
            for (var i = startPage; i < startPage + num; i++) {
                /********
                 * 判断是否是当前页, 如果是当前页那么加上on这个类
                 * */
                if(i == currentPage){
                    temp += ' <li class="on">'+i+'</li>'
                }else{
                    temp += ' <li>'+i+'</li>';
                }
            }
            temp += ' <li class="last"><img src="imgs/right.png" alt=""></li>';
            $('.fenYe').html(temp);
        }


        //调用
        updatePage(1);
        //TODO step2: 添加点击事件
        $('.fenYe').on('click', 'li:not(.first,.last)', function () {
            var cur = $(this).text();//获取当前页
            updatePage(cur);//更新
            getData(cur);
        });
        $('.fenYe').on('click','li.first', function () {
            if(count==1){
                updatePage(count);//更新
                getData(count);
                $(".first").hide();
            }else{
                updatePage(count);//更新
                getData(count);
            }
            count--;
//            updatePage(1);//更新
//            getData(1);


        })
        $('.fenYe').on('click','li.last', function () {
            count++;
            if(count==6){
                updatePage(count);//更新
                getData(count);
                $(".last").hide();
            }else{
                updatePage(count);//更新
                getData(count);
            }
//            updatePage(totalPage);//更新
//            getData(totalPage);
        })
    })


    $('nav ul li').click(function(){
        $(this).addClass('on5').siblings().removeClass('on5')
    });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_41829196/article/details/80793881
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022