jquery.pagination.js使用总结

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();
        });
        ...省略部分代码

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

• 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	数据插件绑定时，执行的回调函数，默认值为无执行效果。