搜索
javascript - 请问想要实现分页效果有没有什么好的方法?
PHPz
PHPz 2017-04-10 15:45:29
[JavaScript讨论组]

请问想要实现分页效果有没有什么好的方法?

PHPz
PHPz

学习是最好的投资!

全部回复(2)
迷茫

可以看下这个demo: http://xiaodongzai.github.io/tf_pagination/

天蓬老师

用了 jquery.pagination.js 按照里面的方法写 可是分页出来 每页只有一条 请问是为什么

<p id="Searchresult" class="content">

<!--分页初始化完成后这里的内容会被替换。-->

</p>
<p id="hiddenresult" style="display:none;">

<!-- 列表元素 -->

</p>
<p id="Pagination" class="pagination">

            <span class="current prev">上一页</span>
            <span class="current">1</span>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <span>...</span>
            <a href="#">8</a>
            <a href="#" class="next">下一页</a>

</p>

$(function(){

        //此demo通过Ajax加载分页元素
        var initPagination = function() {
            var num_entries = $("#hiddenresult p.main").length;
            // 创建分页
            $("#Pagination").pagination(num_entries, {
                num_edge_entries: 1, //边缘页数
                num_display_entries: 4, //主体页数
                callback: pageselectCallback,
                items_per_page: 3, //每页显示几项
                prev_text: "前一页",
                next_text: "后一页"
            });
        };

        function pageselectCallback(page_index, jq){

            var new_content = $("#hiddenresult p.main:eq("+page_index+")").clone();
            $("#Searchresult").empty().append(new_content); //装载对应分页的内容
            return false;
        }
        //ajax加载
        $("#hiddenresult").load("load.html", null, initPagination);
    });
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号