Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use PHP+jQuery to create a list paging function module, I hope you will learn something after reading this article, let's discuss it together!

A list paging function module is made. The main files include the paging class page.class.php and the ajax.js that controls ajax paging. The main functions are:

1. You can choose three common url paging formats

two。 You can choose url paging or ajax paging

3. Both paging methods can customize the text of the paging a label

The 4.url paging method can customize the paging offset

5.url paging can choose manual jump mode: manually enter the page number jump or drop-down menu to select the page number jump.

Elements that the list paging feature contains, but not necessarily all, include:

Home page, next page, previous page, last page, specific page number, manually entered jump to which page, drop-down menu select jump to which page, information (total number of pages, total number of items, current page number), and so on.

The elements that must be included are: previous page, next page, specific page number.

First, take a look at how other websites are done (Baidu search, Tiger Pop, Taobao, Xiami, Dream weaving official website):

1. Baidu search is composed of the simplest "previous page", "next page" and specific page numbers. The paging offset is the first 5 pages and the last 4 pages

two。 Tiger topic (the page number of http://bbs.hupu.com/topic-5) includes "previous page", "next page", specific page number, manual input jump to which page, information and other elements, as well as the home page and the last page, except that the first and last pages here are shown not in words but in specific page numbers. The paging offset is 4 pages before and after. The list page of the blog park (http://www.cnblogs.com/cate/php/#p12)) is handled in the same way.

3. Taobao Baby list page (http://s.taobao.com/list?spm=a217v.7289245.1997888733.7.4JHYae&seller_type=taobao&sort=sale-desc&cat=50029216&sd=0&tid=0&olu=yes&isnew=2&navid=city&smc=1&_input_charset=utf-8&tab=all&app=list&s=0&auction_tag[]=12034), including "previous page", "next page", specific page number, information, manual input jump to which page (and a small effect) The OK button pops up when you click on the input box on which page to go), which also includes the home page, except that the home page is replaced by page number 1. The paging offset is 2 pages before and after.

4. Shrimp list (http://www.xiami.com/collect/recommend?spm=a1z1s.2943601.6856193.30.dqFWiZ), including "previous page", "next page", specific page number, omitted page number (...) that can be redirected, information, as well as home page displayed with page number 1. The paging offset is the first 2 pages and the last 5 pages.

Finally, there is the Weaving Dream official website article list page (http://www.dedecms.com/news/list_133_11.html), which contains "home page", "previous page", "next page", specific page number, "last page", drop-down menu to which page to jump to, information. The paging offset is 5 pages before and after:

Unfortunately, when you browse to page 11, the width is too wide and there is a problem with the layout:

The practice and effect of this paging feature is:

1.url paging style1:

How to enter jump page numbers manually by ①:

Always show the last page

"..." Jump to the next page with the largest page number except the last page currently displayed, and place the mouse over it to give a hint

The front and rear offset can be customized, but the same but different, the front "." Jump to the previous page except the first page number

The ② drop-down menu selects the way to jump:

2.url paging style2:

Use "home page" and "last page" instead of "1" and last page number, and use the first n pages and the last n pages instead of "."

In order to make "the first 10 pages" and "the last 10 pages" appear at the same time, the data of the database is added.

There is also a way to jump from the drop-down menu

3.ajax pagination:

The only elements that appear are Home, previous, next, and Last.

On the home page:

In the middle:

At the last page:

The file structure diagram of the module:

ROOT:

├─ conn

│ └─ conn.php

│

├─ libs-- smarty library

│

├─ templates

│ │

│ ├─ demo.html-- function page template file

│ │

│ ├─ css

│ │ ├─ common.css

│ │ └─ style1.css

│ │

│ ├─ images

│ │ └─ loading.gif-- request data to receive the previous load diagram when ajax paging

│ └─ js

│ ├─ jquery-1.8.3.min.js

│ └─ ajax.js-the js loaded by the template demo.html when the paging mode is ajax

│

├─ templates_c

│

├─ init.inc.php-smarty configuration file

│

├─ page.class.php-paging class

│

├─ demo.php

│

└─ ajaxpage.php-the php file that accepts the request when ajax is paged

What to pay attention to:

1. Offset display settings, mainly when url paging mode 1, when to display "...": when the current page number-front offset-1 > 1, the front "..." should be displayed; when the current page number + post offset + 1 < total number of pages, the following "..." should be displayed.

two。 Selectively load js: load ajax.js only when paging in ajax mode

3. The external js cannot parse the smarty tag, so the value passed when using the external js should be processed.

When 4.ajax pagination, the default is the first page, that is, there must be "next page" and "last page" first, so the add and click functions of "previous page" and "home page" should be included in the "next page" and "last page" click function.

Main code:

Page.class.php:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.