使用JQuery实现分页功能

导读：原文作者Rajeev H发表了一篇《Paginate with JQuery》，文中介绍了使用JQuery代码制作的既漂亮又好用的分页插件。以下是文章摘要：

分页功能是用户在屏幕上的点击纪录列表按钮，从而实现上一页和下一页的分页功能。当你页面有大量的文字、图片信息，屏幕显示过长时，分页功能就起到了的作用。

让我们来看如何使用JQuery实现分页功能的插件。在本篇文章中就不具体介绍如何设置JQuery的细节。现在我们直接进入主题，这个分页插件是在jquery.pagination.js文件中使用HTML编写，所以需要一个CSS的样式来定义分页元素。

这个插件是由几个的小链接图标组成的网页链接。每个链接表示一个页面，你点击这个链接就可以实现分页功能。下图是在网页中插件的图标。

在分页之前，您可以自由制定每个页面所显示的行数。JQuery的分页插件会自动计算你分开的网页数量，插件上会会显示出总共页面条数。

1. <linkrel="stylesheet"href="css/pagination.css"/>
2. <scripttype="text/javascript"src="js/pagination/jquery.pagination.js"></script>
3. <scripttype="text/javascript">
4. var_EVENT;
5. var_MAX_DISPLAY_PAGES=5;
6. var_ITEMS_PER_PAGE=4;
7. jQuery(document).ready(function(){
8. initPagination();
9. });
11. functioninitPagination(){
12. _EVENT="load";
13. vartotalItemCount=formObj.totalItemCount.value;
14. jQuery("#pageLinks").pagination(totalItemCount,{
15. callback:paginate,
16. num_display_entries:_MAX_DISPLAY_PAGES,
17. items_per_page:_ITEMS_PER_PAGE
18. });
19. }
20. functionpaginate(pageIndex,container){
21. varstartOffset;
22. varendOffset;
23. varformObj=document.forms["dummyForm"];
24. if(_EVENT!="load"){
25. endOffset=(pageIndex+1)*4;
26. startOffset=endOffset–4;
27. formObj.startOffset.value=startOffset;
28. jQuery.get("dummy.html?operation=viewList",params,function(data){
29. jQuery(‘#resultArea’).html(data);
30. });
31. }else{
32. _EVENT="";
33. }
35. returnfalse;
36. }
38. </script>
39. <formname="paginationForm">
40. <divid="resultArea">
41. <!–Thelistofrecordstopaginatewillcomehere;maybeinatableform–>
42. </div>
43. <divid="pageLinks">
44. <!–PagelinkswillberenderedbyJQueryplugin
45. uponcallingthepaginatecallbackfunctionforthefirsttime–>
46. </div>
48. <inputtype="hidden"name="startOffset"/>
49. <inputtype="hidden"name="totalItemCount"value="${pageList.totalItemCount}"/>
50. </form>

文档第一次加载时会记录总数。假设你的servlet自动保存了此次记录，会自动保存在名为totalItemCount中。如果将记录保存在指定的位置，需手动定义一个<div>元素来调用分页函数使用该<div>元素标识符。

原文链接：http://www.rajeevhathi.com/2011/01/paginate-with-jquery/