jquery paginator分页插件帮助文档

1、JQuery Pagination PluginJQery分页插件( HYPERLINK /project/jquery-pa /project/jquery-pa gination)Submitted by rohitsinghsengar on January 8, 2010 - 3:14amAfter using various jQuery plugins for pagination, I decided to write my own jQuery paginator plugin. While creating this plugin, I tried to overcome o

2、ther plugins limitations and make it easy & highly customizable to meet demands of most of developers. Here are few features of this plugin,特色如下：Very simple. Just 1 line of code to apply pagination on any div/container.No need for creating extra divs for pagination.4 styles of pagination.Various oth

3、er options like jump to page, page info and change items per page on fly.Easy customization and styling.Nice fading effect during changing of page.Why useit?Oftenyouhavelargenumberofitems/datainadiv,whichnot only breaks your design but also looks ugly and lengthy. Apply this plugin on that div and y

4、ou will get a nice seamless pagination on that div, which dont break your design and visitors can easily navigate to all the items. You can style or it customize according to your requirements See Demo.Implementation :Download latest jquery script and paginator.jsInclude both scripts in html documen

5、t in head section.在 html 文档的 head部分包含以下2行：Initiate pagination by writing following code in head section inside tags, 在 html 文档的 head 部分写以下代码初始化分页$(function() $(#).pagination(); );/ instead of , type in id of the div on which you want to create pagination.Its all you need to do. Load the page on brow

6、ser and now you can see a simple, basic pagination on the page. See DemoCust omiza tion:定制Style Paginator: There are 3 classes - paginator (container for paginator), active (class for active pages) and inactive (class for current page). We can apply little css on these classes to make paginator look

7、s pretty, either in document itself or in stylesheet. See demo有 3 个 class：paginator （用于分页容器）, active （用于活动页 ） and inactive （用 于当前页）.我们可以应用一点 css 在这些 class 上，使得分页看起来漂亮一些。 css 可以写在 html 中或者样式表文件中 .activecolor:#0033CC;border: solid 1px #0000FF; padding:3px 5px;margin:5px; text-decoration:none;.inactive

8、color:#000000; cursor:default; text-decoration:none; border: solid 1px #0000FF; background-color:#0099FF; padding:3px 5px;margin:5px;Paginator Style: Open paginator.js, there is a variable called paginatorStyle. This variable accepts values from 1 to 4, for displaying different styles of paginator.

9、More info is given in comments below that.打开paginator.js文件,有一个叫做paginatorStyle的变量。该变量的值可以 是14，用于指定不同的分页风格。Pagination Position: By defaul t the posi t i on of pag inat or is be l ow the div where pagination is applied. In paginator.js you can change paginatorPosition to top if you want paginator to b

10、e on the t op i nst ead of bottom, or both if you want it to be on both (top and bottom).默认情况下，分页的位置在div的下方。在pagina to r.js文件中，你可以改变变 量paginatorPosition的值为top(显示在div的上方)或者both(显 示在div的上方及下方)Changing Symbols: Openpaginator.js, there are variables like firstPageSymbol, previousPageSymbol, nextPageSymb

11、ol, lastPageSymbol. You can change these symbols, so instead of as symbol for first page, you can write FIRST PAGE, or give img tag if you want fancy image for first page. Also, there is a variable called separator, which will appear in-between page options. Make it blank if you dont want it.打开 pagi

12、nator.js文件,有一些变量如 firstPageSymbol, previousPageSymbol, nextPageSymbol, lastPageSymbol。你可以改变这些符号。 因此，对于第一页，可以不使用符号，可以写文字FIRST PAGE，或者给一个 img标签。还有一个变量叫做separator，它出现在分页选项之间。如果你不想 要他，可以以使它为空。Changing Items per page and Start Page: By default there are 5 items per page and start page for pagination is f

13、irst page. You can change them inpaginator.js, the variables are named itemsPerPage and startPage.默认情况下，每页显示5条记录，开始页是第一页。你可以在paginator.js中 改变他们。变量名分别是it emsPerPage、st ar tPageEnabling other options: There are 3 options available, like goto to page, change items per page, display page info. By defaul

14、t these are disabled,youcanenablethemaccordingtoyourneeds.Youcanenablethem by replacing false with true as variables value, inpaginator.js. More info is given in comments besides each option.有 3 个可选的变量，分别是：goto to page, change items per page, display page info。默认情况下它们不可用。可以根据需要设置这些变量值为true来打 开它们。Cal

15、ling pagination again after changing content: Ifyouchangecontent, upon which pagination is applied in-between, just call initPaginator(); afterchangingcontent.Itwillapplypaginationagainonthenewcontent with same previous settings.如果你改变了内容，在它上面已经应用了分页，那么在改变内容之后，只需调用 ini tPagina to r();方法。它将在新的内容上再次应用分

16、页.De-paginating Content : At anytime, if you want toremovepagination from the content, just call $(#).depagination(); You can call $(#).pagination(); to apply pagination again on same or any other content. Kindly remember, at one time you can apply paginationon only one div or content. If you want t

17、o apply pagination on other div duringprogram,firstcalldepaginationfunctiononpreviousdivandthen pagination function on new div.在任何时候，如果你想删除分页，只需调用$(#).depagina tion(); 即可。Dont want to open paginator.js: No worries, if you dont want to change these variables in paginator.js, you can still change thes

18、evariables in html documents just before calling the pagination function. Like See Demo如果你不想在 paginator.js 文件中修改这些变量，那么可以在调用 pagination() 函数之前在 html 文档中修改这些变量。例如：$(function()itemsPerPage = 3;paginatorStyle = 2; paginatorPosition = both;enableGoToPage = true;$(#result).pagination(););Thats it. Apply it wherever you want. Play around it with, try different styles and opti