jquerypaginator分页插件x帮助文档.doc

JQuery Pagination PluginJQery分页插件（/project/jquery-pagination）Submitted by rohitsinghsengar on January 8, 2010 - 3:14am After using various jQuery plugins for pagination, I decided to write my own jQuery paginator plugin. While creating this plugin, I tried to overcome other plugins limitations and make it easy & highly customizable to meet demands of most of developers. Here are few features of this plugin,特色如下：1) Very simple. Just 1 line of code to apply pagination on any div/container.2) No need for creating extra divs for pagination.3) 4 styles of pagination.4) Various other options like jump to page, page info and change items per page on fly.5) Easy customization and styling.6) Nice fading effect during changing of page.Why use it? Often you have large number of items/data in a div, which not only breaks your design but also looks ugly and lengthy. Apply this plugin on that div and you 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:1) Download latest jquery script and paginator.js2) Include both scripts in html document in head section.在html文档的head部分包含以下2行：如下：3) 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 browser and now you can see a simple, basic pagination on the page. See Demo.Customization:定制1) 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 looks 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;.inactivecolor:#000000;cursor:default;text-decoration:none;border: solid 1px #0000FF;background-color:#0099FF;padding:3px 5px;margin:5px;2) 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. More info is given in comments below that.打开paginator.js文件,有一个叫做paginatorStyle的变量。该变量的值可以是14，用于指定不同的分页风格。3) Pagination Position: By default the position of paginator is below the div where pagination is applied. In paginator.js you can change paginatorPosition to top if you want paginator to be on the top instead of bottom, or both if you want it to be on both (top and bottom).默认情况下，分页的位置在div的下方。在paginator.js文件中,你可以改变变量 paginatorPosition的值为top（显示在div的上方）或者both （显示在div的上方及下方）4) Changing Symbols: Open paginator.js, there are variables like firstPageSymbol, previousPageSymbol, nextPageSymbol, 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. 打开paginator.js文件,有一些变量如firstPageSymbol, previousPageSymbol, nextPageSymbol, lastPageSymbol。你可以改变这些符号。因此，对于第一页，可以不使用符号，可以写文字FIRST PAGE，或者给一个img标签。还有一个变量叫做separator，它出现在分页选项之间。如果你不想要他，可以以使它为空。5) Changing Items per page and Start Page: By default there are 5 items per page and start page for pagination is first page. You can change them in paginator.js, the variables are named itemsPerPage and startPage.默认情况下，每页显示5条记录，开始页是第一页。你可以在paginator.js中改变他们。变量名分别是itemsPerPage 、startPage6) Enabling other options: There are 3 options available, like goto to page, change items per page, display page info. By default these are disabled, you can enable them according to your needs. You can enable them by replacing false with true as variables value, in paginator.js. More info is given in comments besides each option.有3个可选的变量，分别是：goto to page, change items per page, display page info。默认情况下它们不可用。可以根据需要设置这些变量值为true来打开它们。7) Calling pagination again after changing content: If you change content, upon which pagination is applied in-between, just call initPaginator(); after changing content. It will apply pagination again on the new content with same previous settings.如果你改变了内容，在它上面已经应用了分页，那么在改变内容之后，只需调用initPaginator();方法。它将在新的内容上再次应用分页.8) De-paginating Content : At any time, if you want to remove pagination 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 pagination on only one div or content. If you want to apply pagination on other div during program, first call depagination function on previous div and then pagination function on new div.在任何时候，如果你想删除分页，只需调用$(#).depagination();即可。9) Dont want to open paginator.js: No worries, if you dont want to change these variables in paginator.js, you can still change these variables 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 op