导读:原文作者Rajeev H发表了一篇《Paginate with JQuery》,文中介绍了使用JQuery代码制作的既漂亮又好用的分页插件。以下是文章摘要:
分页功能是用户在屏幕上的点击纪录列表按钮,从而实现上一页和下一页的分页功能。当你页面有大量的文字、图片信息,屏幕显示过长时,分页功能就起到了的作用。
让我们来看如何使用JQuery实现分页功能的插件。在本篇文章中就不具体介绍如何设置JQuery的细节。现在我们直接进入主题,这个分页插件是在jquery.pagination.js文件中使用HTML编写,所以需要一个CSS的样式来定义分页元素。
这个插件是由几个的小链接图标组成的网页链接。每个链接表示一个页面,你点击这个链接就可以实现分页功能。下图是在网页中插件的图标。
在分页之前,您可以自由制定每个页面所显示的行数。JQuery的分页插件会自动计算你分开的网页数量,插件上会会显示出总共页面条数。
- <link rel="stylesheet" href="css/pagination.css" />
- <script type="text/javascript" src="js/pagination/jquery.pagination.js"></script>
- <script type="text/javascript">
- var _EVENT;
- var _MAX_DISPLAY_PAGES = 5;
- var _ITEMS_PER_PAGE = 4;
- jQuery(document).ready(function() {
- initPagination();
- });
- function initPagination() {
- _EVENT = "load";
- var totalItemCount = formObj.totalItemCount.value;
- jQuery("#pageLinks").pagination(totalItemCount, {
- callback: paginate,
- num_display_entries: _MAX_DISPLAY_PAGES ,
- items_per_page: _ITEMS_PER_PAGE
- });
- }
- function paginate(pageIndex, container){
- var startOffset;
- var endOffset;
- var formObj = document.forms["dummyForm"];
- if (_EVENT != "load") {
- endOffset = (pageIndex + 1) * 4;
- startOffset = endOffset – 4;
- formObj.startOffset.value = startOffset;
- jQuery.get("dummy.html?operation=viewList", params, function(data){
- jQuery(‘#resultArea’).html(data);
- });
- } else {
- _EVENT = "";
- }
- return false;
- }
- </script>
- <form name="paginationForm">
- <div id="resultArea">
- <!– The list of records to paginate will come here; maybe in a table form –>
- </div>
- <div id="pageLinks">
- <!– Page links will be rendered by JQuery plugin
- upon calling the paginate callback function for the first time –>
- </div>
- <input type="hidden" name="startOffset" />
- <input type="hidden" name="totalItemCount" value="${pageList.totalItemCount}" />
- </form>
文档第一次加载时会记录总数。假设你的servlet自动保存了此次记录s会自动保存在名为totalItemCount中。如果将记录保存在指定的位置,需手动定义一个<div>元素来调用分页函数使用该<div>元素标识符。
原文链接:http://www.rajeevhathi.com/2011/01/paginate-with-jquery/
IDCsped 提供最新的IT互联网资讯,本着分享、传播的宗旨,我们希望能帮助更多人了解需要的信息!
部分文章转载自互联网、部分是IDCsped原创文章,如果转载,请注明出处:www.idcsped.com !销售电话:13430280788
Copyright © 2012-2017 | www.idcsped.com 版权所有