asp.net AJAX: Step by step to create a beautiful news list (no refresh paging, Content Preview) (3)

In the previous two chapters, we introduced the requirements analysis and summary design briefly, followed by the focus of the coding phase (implementation of no refresh paging). Before you write code, be sure to have a plan to write code, you can not start at the beginning of the code, no matter what, unless you special cow.

Let's take a look at the requirements analysis:

3.== read the news list without a refresh, click on the next page to trigger the event, invoke Ajax to find the next page of data in the database and return it, and then display it on the page.

Here are two events, are JS events, we use jquery code to achieve.

pagination, we use jquery paging plug-in pagination, the official address for the http://plugins.jquery.com/project/pagination download JS files and CSS files (the download address below)

Let's talk about its basic usage:

Like a typical jquery plugin, this plugin is easy to use. The method is pagination, such as $ ("#page"). Pagination (100), where the 100 parameters are required to indicate the total number of items displayed, which is the simplest use.

For example, use the following code:

$("#Pagination").pagination(56,　{
num_edge_entries:　2,
num_display_entries:　4,
callback:　pageselectCallback,
items_per_page:1
});

The meaning of this code is: a total of 2 (maxentries) list items, the end of both sides of the page is displayed at the end of the num_edge_entries, the number of consecutive page bodies show 4 (num_display_entries), The callback function is Pageselectcallback (callback), and the list item displayed on each page is 1 (items_per_page). You can modify the parameters in this configuration against the parameter table.

Specific usage can refer to official documentation or http://www.cnblogs.com/aosiyelong/archive/2010/03/30/1700262.html.

Then tell me how to integrate it into our side.

Add relevant JS files and CSS files to the newslist.aspx page (download address below): Jquery-1.4.1.js,pagination.js

<link　type="text/css"　rel="Stylesheet"　 href="css/newsList.css"　/>
<link　type="text/css"　rel="Stylesheet"　 href="css/pagination.css"　/>
<script　src="js/jquery-1.4.1.js"　 type="text/javascript"></script>
<script　src="js/jquery.pagination.js"　 type="text/javascript"></script>