jQuery 无刷新分页实例代码

前端技术 2023/09/01 JavaScript

复制代码 代码如下:

<html>

<head>
     <script type=\"text/javascript\" src=\"script/jquery-1.7.1.min.js\"></script>

        <script type=\"text/javascript\" src=\"script/jquery-1.7.1.js\"></script>
        <script type=\"text/javascript\" src=\"script/jquery.pagination.js\"></script>
        <script type=\"text/javascript\">
            $(function(){
                    //此demo通过Ajax加载分页元素
                    var initPagination = function(data) {

                    var feedback = \"\";

                    $.each(data.list, function(index, d) {
                        var str =\"\";
                        str+= \"<dl class=\'result\' style=\'display:none;\'>\";
                        str+=\"<dt><img src=\'http://www.phpstudy.net/headshotsByName/balijiang.png?l\' alt=\'图片\' width=\'70\' height=\'70\' /></dt>\";
                        str+=\"<dd><a href=\'#\' title=\'VYyu\'>VYyu</a></dd>\";
                        str+=\"<dd class=\'gray\'>2009-09-26 </dd>\";
                        str+=\"<dd>\"+d+\"</dd>\";
                        str+=\"</dl>\";
                        feedback += str;
                        });
                    $(\"#feedback\").empty().append(feedback); //装载对应分页的内容

                    //alert(datac.list.length);
                    //var num_entries = $(\".result\").length;
                    var num_entries = data.list.length;
                    // 创建分页
                    $(\"#page\").pagination(num_entries, {
                        num_edge_entries: 1, //边缘页数
                        num_display_entries: 5, //主体页数
                        callback: pageselectCallback,
                        items_per_page: 3, //每页显示1项
                        prev_text: \"前一页\",
                        next_text: \"后一页\"
                    });

                    pageselectCallback(0);
                    }

function pageselectCallback(page_index, jq){

    var resultList = $(\".result\");
    //var feedback = \"\";
    //alert(resultList.length);
    $(\".result\").each( function(index, data) {
            //alert(index);
            $(this).css(\'display\',\'none\');
            if(Math.floor(index/3)  == page_index){
            $(this).css(\'display\',\'block\');
            }
            });

    return false;
}
//ajax加载
$.getJSON(\"testPage\",null, function(data){initPagination(data)});
});
</script>

</head>

<body>

<div id=\"feedback\" class=\"feedback\"> </div>

<div id=\"page\" class=\"pager\"></div>
</body>

</html>

本文地址：https://www.stayed.cn/item/1958

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案