Jquery custom plug-in achieves paging effect, jquery Paging

Jquery custom plug-in achieves paging effect, jquery Paging

This section describes how to customize the jquery plug-in to implement the paging effect. Let's just look at the implementation effect first:

Paging plug-in

The implementation code is as follows:

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> 

The following describes the implementation ideas. To achieve the paging effect, data loading can be divided into two situations: one-time data acquisition and dynamic data acquisition. One-time data acquisition means that the data to be queried is queried at one time and processed by page at the front-end. Dynamic Data Retrieval dynamically acquires data based on the number of entries displayed on the current page and each page. For the first type, it can be used when the data volume is relatively small, which can reduce the trouble of each request to the database and write paging SQL statements. For the second type, it is applicable when the data volume is large, when the data volume is very large, one-time data query, whether it is the front-end or back-end, will undoubtedly slow down the program execution efficiency and time.

The implementation in the second case is simpler than the implementation in the first case, so this article will not explain it. This article is the first case.

First, obtain the data. In the program, I simulate and define a data in JSON format, including the total number of items and various objects.

Next, load the entries to be displayed based on currpage and pagesize. The key is to obtain the start and end numbers. The START number is relatively simple, for (currpage-1) * pagesize; the number of termination is a little more troublesome, because there is a judgment data. total % pagesize is zero and the current page is not the last page, when data. total % pagesize! = 0 when the condition that the current page is the last page is met, the number of termination is data. total, and the number of no groups is currpage * pagesize.

Again, the implementation of page control. The key to page control is currpage. On the first page, currpage = 1. on the last page, you must determine whether the total % pagesize is zero. The value is total/pagesize, and the value is not otal/pagesize, and the value is rounded to + 1, if the current page is greater than zero, it is the current page minus 1; otherwise, there is no previous page; next page, if the current page is smaller than the last page, add 1 to the current page; otherwise, there is no last page.

Finally, load the display.


Use jquery plug-in to implement Paging
Jquery has a plug-in called dataTables. You can find it.
Jquery. dataTables. min. js

How does the jQuery plug-in implement paging?
<%
Page = clng (request ("page "))
Set rs = Server. CreateObject ("ADODB. RecordSet ")
If BigClass <> "" and SmallClass <> "" then
SQL = "select * from news where BigClassName = '" & BigClass & "' and SmallClassName = '" & SmallClass & "'order by id desc"
Rs. Open SQL, conn, 1, 1
Elseif BigClass <> "then
SQL = "select * from news where BigClassName = '" & BigClass & "'order by id desc"
Rs. Open SQL, conn, 1, 1
End if
If rs. eof and rs. bof then
Response. Write ("no records now ")
Else
%>
<Div class = "newslist">
<%
Rs. PageSize = 20
If page = 0 then page = 1
Pages = rs. pagecount
If page> pages then page = pages
Rs. AbsolutePage = page
For j = 1 to rs. PageSize
%>
<Ul> <li> <span class = "time"> <% = RS ("AddDate") %> </span> <a href = "news_info.asp? Id = <% = RS ("id") %> "target =" _ blank "> <% = RS (" TITLE ") %> </a> </li> </ul>
<%
Rs. movenext
If rs. eof then exit
Next
%>
</Div>
<Div class = "clear"> </div>
<Div class = "pagePanel pagePane2">
<Ul> <li class = "cr"> <form method = Post action = "news. asp? BigClass = <% = BigClass %> & SmallClass = <% = SmallClass %> ">
<% If... the remaining full text>