当前位置: 首页 > 工具软件 > Pagination.js > 使用案例 >

jquery.pagination.js使用总结

俞子实
2023-12-01

Pagination是一款不但加载数据而且还能进行分页的jQuery插件,实现的过程是:先一次性将需要显示的数据载入到页面中,然后根据当前页面的索引号,获取指定某页需要显示的数据,并将这部分数据追加到内容显示容器中,从而实现分页加载数据的效果。

根据这一过程,Pagination插件在加载和显示数据时,时一次性,及时的,而不是异步请求,因此,它在执行分页显示数据时,速度很快,用户体验很好。但这种一次性加载数据到页面的操作并不适合对大量数据的请求,因此在页面中,如果是小数据量的分页显示需求,使用该插件还是十分好的。

Pagination插件的使用:

(1)功能描述:
在页面中,通过数据分页插件,以列表的形式显示全部的订单信息,包括"订单号",“姓名”,“性别”,“总金额”,"详细"等内容。用户单击"详细"列中"查看"链接时,再次通过数据分页插件显示对应订单的全部图片信息。

(2)实现代码:

    <Link href="Css-8-12/jquery.pagination.css" rel="stylesheet" type="text/css" />
     
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Js-8-12/jquery.pagination.js"></script>
     
    <style type="text/css">
        ...省略部分代码
    </style>
     
    <script type="text/javascript">
        function psCallback(pi,jq){
            //获取指定页码中的内容
            var newcxt = $('#Result ul:eq(' + pi + ')').clone();
            //向内容区添加指定页码的内容
            $('#Content').empty().append(newcxt);
            return false;
        }
        function isCallback(pi,jq){
            //隐藏图片区域中的图片
            $('#Picture img:visible').hide();
            //显示图片区域中指定页码的图片
            $('#Picture img:eq(' + pi + ')').show();
        }
        function initPagination(){
            //获取全部记录数量
            var SumNum = $('#Result ul').length;
            //记录显示区绑定数据分页插件
            $(".divpage").pagination(SumNum,{
                num_edge_entries:1,
                callback:paCallbck,
                items_per_page:1
            });
            //获取全部图片数量
            SumNum = $('#Picture img').length;
            //图片显示区绑定另一个数据分页插件
            $.(".divimg").pagination(SumNum,{
               callback:paCallbck,
               items_per_page:1 
            });
        }
        function showPic(){
            $("ImgLst").toggle();
        }
        $(function(){
            //调用数据分页插件
            initPagination();
        });
    </script>

    <div id="Iframe">
        <div class="divpage"></div>
        <br style="clear:both" />
        <ul>
            <li class="li">
                <span>订单号</span>
                <span>姓名</span>
                <span>性别</span>
                <span>总金额</span>
                <span>详细</span>
            </li>
        </ul>
        <div id="Content">
            <span class="spntip">正在加载...</span>
        </div>
        <div class="divpage"></div>
        <div id="Result">
           <ul>
                <li>
                    <span>10101</span>
                    <span>张小虎</span>
                    <span>男</span>
                    <span>465.98</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
                <li>
                    <span>10101</span>
                    <span>张小虎</span>
                    <span>男</span>
                    <span>465.98</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
                <li>
                    <span>10102</span>
                    <span>刘海</span>
                    <span>女</span>
                    <span>600.12</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
                <li>
                    <span>10103</span>
                    <span>李烨海</span>
                    <span>男</span>
                    <span>930.12</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
            </ul>
            <ul>
                <li>
                    <span>10201</span>
                    <span>张三百</span>
                    <span>男</span>
                    <span>565.98</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
                <li>
                    <span>10202</span>
                    <span>接小海</span>
                    <span>男</span>
                    <span>900.12</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
                <li>
                    <span>10203</span>
                    <span>李明明</span>
                    <span>女</span>
                    <span>630.12</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
            </ul>
            <ul>
                <li>
                    <span>10301</span>
                    <span>程虎</span>
                    <span>男</span>
                    <span>765.98</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
                <li>
                    <span>10302</span>
                    <span>张明海</span>
                    <span>女</span>
                    <span>802.12</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
                <li>
                    <span>10303</span>
                    <span>胡小明</span>
                    <span>男</span>
                    <span>630.12</span>
                    <span>
                        <a href="javascript:showPic()">
                            查看
                        </a>
                    </span>
                </li>
            </ul>
        </div>
        <div id="ImgLst">
            <div id="Picture" class="pic">
                <img src="Images-8-12/pic08.jpg" />
                <img src="Images-8-12/pic09.jpg" />
                <img src="Images-8-12/pic10.jpg" />
                <img src="Images-8-12/pic11.jpg" />
            </div>
            <div class="divimg"></div>
        </div>
    </div>

(3)代码分析:

在本示例中,在使用数据分页插件Pagination之前,首先在页面的<head>元素中导入对应的CSS样式和插件文件,代码如下:

<Link href="Css-8-12/jquery.pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-12/jquery.pagination.js"></script>

在导入插件对应文件,需要注意与jQuery框架的先后顺序,因为数据分页插件Pagination是基于jQuery开发的,应该首先导入jQuery框架,然后导入插件对应的JS文件,否则使用将会有异常。

在完成插件导入后,接下来的工作就是编写对应的JavaScript代码,将页面中的内容元素与数据分页插件相绑定,实现数据分页显示的效果,核心代码如下:

        function psCallback(pi,jq){
            //获取指定页码中的内容
            var newcxt = $('#Result ul:eq(' + pi + ')').clone();
            //向内容区添加指定页码的内容
            $('#Content').empty().append(newcxt);
            return false;
        }
        function isCallback(pi,jq){
            //隐藏图片区域中的图片
            $('#Picture img:visible').hide();
            //显示图片区域中指定页码的图片
            $('#Picture img:eq(' + pi + ')').show();
        }
        function initPagination(){
            //获取全部记录数量
            var SumNum = $('#Result ul').length;
            //记录显示区绑定数据分页插件
            $(".divpage").pagination(SumNum,{
                num_edge_entries:1,
                callback:paCallbck,
                items_per_page:1
            });
            //获取全部图片数量
            SumNum = $('#Picture img').length;
            //图片显示区绑定另一个数据分页插件
            $.(".divimg").pagination(SumNum,{
               callback:paCallbck,
               items_per_page:1 
            });
        }
        function showPic(){
            $("ImgLst").toggle();
        }
        $(function(){
            //调用数据分页插件
            initPagination();
        });
        ...省略部分代码

在上述代码中,首先自定两个用户插件回调的函数psCallbackisCallback,分别用于记录和图片数据在绑定数据分页插件时的回调处理;在这两个回调函数中都有两个参数:

  • pi:int类型,表示新的页码索引号。
  • jq:一个jQuery对象,表示加载分页链接数据的容器。

在编写完回调函数后,接下来自定义一个initPagination()函数,将页面中的元素数据分页插件相绑定,绑定的格式如下:

$(内容显示容器).pagination(num_display_entries,[options])

在上述代码中,参数num_display_entries为必选项,表示需要显示的总条目数量,页面一次性加载后的记录总量;参数options算是一个可选项对象,该对象可以设置数据插件绑定元素时的相关属性,如显示主体记录条数,上一页或下一页对应的文本内容,该对象的详细功能属性和事件说明如下所示:

options对象的常用参数

参数名称功能描述
items_per_page每页显示的条目数量,默认值为10。
num_display_entries连续分页页码主体部分显示的数量,默认值为10。
current_page当前选中的页面,默认值为0,表示第1页。
num_edge_entries分页页码首尾部分显示的条目数量,默认值为10。
link_to分页时链接,默认值为"#"。
prev_text上一页分页按钮显示的文字内容,默认值为"Prev"。
next_text下一页分页按钮显示的文字内容,默认值为"Next"。
ellipse_text省略的分页页面的表示文字,默认值为"…"
prev_show_always是否显示"上一页"分页按钮,默认值为"true",表示显示。
next_show_always是否显示"下一页"分页按钮,默认值为"true",表示显示。
renderer分页时的模块名称,默认值为"defaultRenderer"。
show_if_single_page如果只有一页,是否显示分页导航,默认值为false,表示不显示。
load_first_page是否显示第1页,默认值为false,表示不显示。
callback数据插件绑定时,执行的回调函数,默认值为无执行效果。
 类似资料: