jQuery Pagination中文说明文档 jQuery分页插件 * 所需jquery最低版本为1.4.2 * @作者 Gabriel Birke (birke *at* d-scribe *dot* de) * @版本 2.2 *翻译:尘絮缘 qq:80213876 http://blog.csdn.net/luoyeyu1989 .net网站制作,删帖子,seo优化。 http://www.89nian.com *2011-11-22 ======================== 说明 ----------- 当您有很多很多数据,需要在网页中以分页的形式显示出来时,这个插件将会帮您创建分页。 使用说明 ----- 在页面中引用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'); 注:如果指定的页码在页码的范围之内则触发分页事件,否则不触发。