jQuery Pagination2.2分页插件中文版

jQuery Pagination中文说明文档
jQuery分页插件
 * 所需jquery最低版本为1.4.2
 * @作者 Gabriel Birke (birke *at* d-scribe *dot* de)
 * @版本 2.2
 *翻译：尘絮缘  qq:80213876   http://blog.csdn.net/luoyeyu1989         ========================

说明
-----------
当您有很多很多数据，需要在网页中以分页的形式显示出来时，这个插件将会帮您创建分页。

使用说明
-----
在页面中引用jQuery和本分页的js及对应的css文件.
在body中创建一对容纳分页链接的标签。
给这个标签加上一个id或class属性(如： "News-Pagination").
这个属性将被用于jQuery选择器。

接下来，写一个含有new_page_index和paging_container这两个参数的js方法。这个方法是在你单击分页链接后的回调函数。
当你单击页码时，对应的页码会被选中。
    function handlePaginationClick(new_page_index, pagination_container) {
        // 这将选择20个内容数组中的元素
        for(var i=new_page_id;i<;i++) {
            $('#MyContentArea').append(content[i]);
        }
        return false;
    }

这个回调函数中需要用到jQuery对dom操作的相关知识。
里面的代码就可以自己去写。
    
在页面初始化中，当你知道有很多记录要显示出来时，创建如下的分页元素：
    // 第一个参数: 记录总数
    // 第二个参数: 对象options
    $("#News-Pagination").pagination(122, {
        items_per_page:20, //pageSize每页最多显示多少条
        callback:handlePaginationClick
    });

这将在容器中创建分页的导航链接。您会看到
数字1-7，第一个数字是高亮显示的。当您单击另一个页码数字时，
高亮将会改变并且回调函数“handlePaginationClick”
被调用。

通过option和一些元素可以高度配置本插件。

可用的Options：
-----------------
以下为options的具体描述：

callback
    当用户单击页码时，回调函数被调用.这个函数接收到两个参数: 新的页码index和分页容器（dom）.
    如果回调函数返回false，则事件不执行.
    分页中这个回调函数是必不可少的！
    它应该包括你所补充的一些代码。
    为了加快用户体验，你不应该在此通过AJAX来加载内容。相反，您可以预加载一些内容然后通过此函数来分页浏览。
        默认值: "function(){return false;}".

current_page
    分页初始化时，被选中的那一页. 也就是当前页
    默认值: 0
    
items_per_page
    pageSize，每页最多显示的记录数。
    默认值: 10
    
link_to
    分页上的链接. 通常分页是通过onclick事件来触发的. 如果这个链接包含id之类的参数等
    , 它将会替换掉原始的分页链接.
    默认值: "#"
    
num_display_entries
    可见的页码数量. 建议设置为奇数（对称好看些）
    默认值: 11
    
next_text
    “下一页”的文字
    默认值: "Next"
    
next_show_always
    是否总是显示“下一页”。
    默认值: `true`
    
prev_text
    “上一页”的文字。
    默认值: "Previous"
    
prev_show_always
    是否总是显示“上一页”。
    默认值: true
    
num_edge_entries
    如果设置为1，则显示“首页”与“尾页”。你也可以把它设置大点的数，以便显示更多的链接。
    默认值: 0
    
ellipse_text
    当页码数之间的数字相差很远时，比如：1 2 3 ... 10 11 12
    显示的字符(在span中)
    默认值: "..."

load_first_page
    如果为true则当插件初始化时回调函数被执行。如果你通过ajax来显示内容，那么在初始化分页插件时应把它设置为false;
    默认值: true


自定义事件触发分页
----------------------------------------
    // 跳到第5页
    $("#News-Pagination").trigger('setPage', [4]);
    // 下一页
    $("#News-Pagination").trigger('nextPage');
    // 上一页
    $("#News-Pagination").trigger('prevPage');

    注：如果指定的页码在页码的范围之内则触发分页事件，否则不触发。

 

 

下载地址：http://ishare.iask.sina.com.cn/f/21330704.html

说明下：

1：ie6下面CSS问题，由于IE6不支持多项选择类（如：".current .next"中间没有空格），导致样式不对。把pagination.css的最后一个样式去掉。

.pagination {
            font-size: 80%;
        }
        
.pagination a {
    text-decoration: none;
    border: solid 1px #AAE;
    color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
    min-width:1em;
    text-align:center;
}

.pagination .current {
    background: #eee;
    color: #555;
    border: solid 1px #AAE;
}

2：手动设置"link_to"属性（让页面的url地址像样，xxxxxx.html?id=123）：

        <script type="text/javascript">                    // This is a very simple demo that shows how a range of elements can            // be paginated.            // The elements that will be displayed are in a hidden DIV and are            // cloned for display. The elements are static, there are no Ajax             // calls involved.                    /**             * Callback function that displays the content.             *             * Gets called every time the user clicks on a pagination link.             *             * @param {int} page_index New Page index             * @param {jQuery} jq the container with the pagination links as a jQuery object             */            function pageselectCallback(page_index, jq){                var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();                $('#Searchresult').empty().append(new_content);                //return false;            }                       /**              * Initialisation function for pagination             */            function initPagination() {                // count entries inside the hidden content                var num_entries = jQuery('#hiddenresult div.result').length;                // Create content inside pagination element                $("#Pagination").pagination(num_entries, {                    callback: pageselectCallback,                    items_per_page:3,// Show only one item per pagenum_edge_entries:2,link_to:"?id=__id__"//分页的js中会自动把"__id__"替换为当前的数。0为第一页});//页面加载时选中指定页$("#Pagination").trigger('setPage', [parseInt(getQueryString("id"))]);             }                        // When document is ready, initialize pagination            $(document).ready(function(){                      initPagination();            });//获取url参数            function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); return null;}        </script>

3：ajax就很简单了。不说了。