fly社区 分页代码

提问 未结 3 157
ChengLiang
ChengLiang 2019-8-16
悬赏:20飞吻
版本:layui fly 浏览器:谷歌
我想知道这 个分页的逻辑是怎么写出的,脑袋都炸了.... 自己写的分页逻辑还是有问题。



回帖
  • 给你看个我弄的玩的页面,写的不咋好,看能不能给你提供思路[嘻嘻]

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>文章</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="header"></div>

    <div class="banner">
    <div class="cont w1000">
    <div class="title">
    <h3>MY<br/>BLOG</h3>
    <h4>well-balanced heart</h4>
    </div>
    <div class="amount">
    <p><span class="text">访问量</span><span class="access">1000</span></p>
    <p><span class="text">日志</span><span class="daily-record">1000</span></p>
    </div>
    </div>
    </div>

    <div class="content">
    <div class="cont w1000">
    <div class="title">
    <span class="layui-breadcrumb" lay-separator="|">
    <a href="javascript:;" class="active">设计文章</a>
    <a href="javascript:;">前端文章</a>
    <a href="javascript:;">旅游杂记</a>
    </span>
    </div>
    <div class="list-item">
    <!--<div class="item">-->
    <!--<div class="layui-fluid">-->
    <!--<div class="layui-row">-->
    <!--<div class="layui-col-xs12 layui-col-sm4 layui-col-md5">-->
    <!--<div class="img"><img src="img/sy_img1.jpg" alt=""></div>-->
    <!--</div>-->
    <!--<div class="layui-col-xs12 layui-col-sm8 layui-col-md7">-->
    <!--<div class="item-cont">-->
    <!--<h3>空间立体效果图,完美呈现最终效果-->
    <!--<button class="layui-btn layui-btn-danger new-icon">new</button>-->
    <!--</h3>-->
    <!--<h5>设计文章</h5>-->
    <!--<p>-->
    <!--室内设计作为一门新兴的学科,尽管还只是近数十年的事,但是人们有意识地对自己生活、生产活动的室内进行安排布置,甚至美化装饰,赋予室内环境以所祈使的气氛,却早巳从人类文明伊始的时期就已存在</p>-->
    <!--<a href="details.html?id=1111" class="go-icon"></a>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    </div>
    <div id="LAY_page_articles" style="text-align: center;"></div>
    </div>
    </div>

    <div class="footer-wrap">

    </div>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
    var currentPage = RequestParameter()["page"];
    var element,laypage,$,menu,load_html;
    layui.config({
    base: 'js/util/'
    }).use(['element', 'laypage', 'jquery', 'menu', 'load_html'], function () {
    element = layui.element
    , laypage = layui.laypage
    , $ = layui.$
    , menu = layui.menu
    , load_html = layui.load_html;

    if(currentPage == "" || currentPage == null || currentPage == undefined){
    currentPage = 1;
    } else {
    if (!(/(^[1-9]\d*$)/.test(currentPage))) { //不是正整数
    currentPage = 1;
    }
    }
    var limit = 2;
    //获取文章分页列表数据
    var list = findPageArticle(currentPage,limit);
    if(list.totalNum == 0){
    layer.msg('未查询到记录!',{icon:1});
    }

    laypage.render({
    elem: 'LAY_page_articles'
    ,count: list.totalNum //数据总数,从服务端得到
    ,limit: limit
    ,curr: currentPage //获取起始页
    ,jump: function(obj, first){
    console.log(list);
    var resultData = list.items;
    var htmls = '';
    for(var i in resultData){
    // htmls += '<a href="'+resultData[i].navigation_url+'">'+resultData[i].navigation_name+'</a>';
    htmls += '<div class="item">' ;
    htmls += ' <div class="layui-fluid">' ;
    htmls += ' <div class="layui-row">' ;
    htmls += ' <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">' ;
    htmls += ' <div class="img"><img src="'+resultData[i].articleTitleImg+'" width="420" height="280" alt=""></div>' ;
    htmls += ' </div>' ;
    htmls += ' <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">' ;
    htmls += ' <div class="item-cont">' ;
    htmls += ' <h3>' + resultData[i].articleTitle ;
    if(resultData[i].isTop == '0'){
    htmls += ' <button class="layui-btn layui-btn-danger new-icon">new</button>' ;
    }
    htmls += ' </h3>' ;
    htmls += ' <h5>'+resultData[i].articleLabel+'</h5>' ;
    htmls += ' <p>'+SubstringEditer(resultData[i].articleContent,100)+'</p>' ;
    htmls += ' <a href="details.html?id='+resultData[i].articleId+'" class="go-icon"></a>' ;
    htmls += ' </div>' ;
    htmls += ' </div>' ;
    htmls += ' </div>' ;
    htmls += ' </div>' ;
    htmls += ' </div>';
    }
    $(".list-item").html(htmls);

    if(first){
    layui.each($('#LAY_page_articles').find('.layui-laypage a'), function(index, item){
    item = layui.$(item);
    var pageCurr = item.data('page');
    if (pageCurr) {
    item.prop('href', 'index.html?page=' + pageCurr);
    }
    });
    }
    }
    });
    menu.init();
    load_html.load_header();
    load_html.load_footer();
    })

    //获取文章分页列表数据
    function findPageArticle(page,limit){
    var data = "";
    var map = {};
    map['page'] = page;
    map['limit'] = limit;
    map['state'] = 0;
    map['sortByIsTop'] = true;
    $.ajax({
    type:"get",
    url:"index/findPageArticle",
    dataType : "json",
    contentType : "application/json",
    async: false, //修改此方法为同步
    data:map,
    success:function(result){
    if(result.code !== 0){
    layer.msg(result.msg,{icon:5});
    } else {
    data = result.data;
    }
    }
    });
    return data;
    }
    </script>
    </body>
    </html>
    页面效果,地址栏页码数和分页栏能保持一致,参数不对就默认第一页
    0 回复
  • ChengLiang
    2019-8-16
    @刁民想害朕 谢谢,我是想通过html直接实现分页的逻辑,不想通过js。js对seo有影响。我这边找到了一个方案通过Java的分页插件实现了。[嘻嘻]
    0 回复
  • ChengLiang
    2019-8-16
    @刁民想害朕 还是非常感谢的
    0 回复