Implementation of JSON-based Ajax without refreshing pagination (1)

Check thisArticlePlease refer to my previous article before

Similar to the Baidu Google Page Splitter Code (Modified on the basis of kwklover)

In the previous article, I made some corrections on the basis of kwklover, but I still don't think it is perfect. You can leave a message to add!

This article is mainly based on the previous article to implement Ajax without refreshing pages. I am a newbie, and the code will inevitably have bugs. Hope you can find it. Thank you!

Because today I just want to do the effect of refreshing new pages. So we started it!

The above part is the data obtained after paging. The following part is the implementation of the binder (for the implementation of the binder, see the http://www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html)

Let's first implement the paging effect of the page,

1. Create an Ajax file page ashx or Aspx. I personally prefer Aspx. Delete all HTML code on the page. Only the page declaration part is retained:

<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "ajax_getdatacount.aspx.cs" inherits = "gsss. html. UI. Ajax. elec_comment.ajax_getdatacount" %>
 

Through the above code, we can see that the new file name is ajax_getdatacount.aspx. Next, let's look at the. CS file on this page.

First, in the page_load event, we get the parameters transmitted by Ajax. I use jquery's post method to submit parameters. The Code is as follows:

Protected void page_load (Object sender, eventargs e) {int pagesize = 5; // the size of the dead page. You can dynamically implement int pagecount = 100 by passing parameters; // number of data entries used for testing (useless) // read the Post parameter values page and PID. PID is the corresponding product ID, this example shows the implementation of string page = DOTNET. framework. common. querystring. F ("page"); string pid = DOTNET. framework. common. querystring. F ("PID"); If (PID! = "") {Gsss. HTML. bll. promotionzone. electronicproducts. t_electronicproducts_comment BLL = new gsss. HTML. bll. promotionzone. electronicproducts. t_electronicproducts_comment (); // read the number of comments of the PID product. pagecount = BLL. getpagercount (convert. toint32 (PID);} If (page = "" & pid! = "") {// Create and display the page splitter buildpager (pagecount, 1, pagesize, convert. toint32 (PID);} If (page! = "" & Pid! = "") {Buildpager (pagecount, convert. toint32 (PAGE), pagesize, convert. toint32 (PID ));}}

Below is the implementation method of the page splitter. It is different from the previous article (I said there was a bug ..) Some minor problems are fixed here ..

The Code is as follows:

/// <Summary> /// create and display the page splitter /// </Summary> /// <Param name = "totalrecords"> total number of pages </param> /// <Param name = "currentpage"> current page number </param> // <Param name = "pagesize"> page size </param> private void buildpager (INT totalrecords, int currentpage, int pagesize, int productid) {int alter = 4; int startpage = 1; int endpage = currentpage + alter; int totalpages = This. calculatetotalpages (totalrecords, pagesize); If (cur External page> Alter) {startpage = currentpage-alter;} If (endpage> totalpages) {endpage = totalpages ;} /// page number a tag add attribute title in order to obtain the clicked page number string strtemp = @ "<a href = 'javascript: void (0) 'title = '{0}'> {1} </a> & nbsp; "; stringbuilder sb = new stringbuilder (); If (currentpage! = Startpage) {If (currentpage> startpage) {sb. append (string. format (strtemp, 1, "Homepage"); sb. append (string. format (strtemp, currentpage-1, "Previous Page") ;}for (INT I = startpage; I <= endpage; I ++) {If (currentpage = I) {sb. append ("<font color = Red>" + I + "</font> & nbsp;") ;}if (currentpage! = I & currentpage> 1) {sb. append (string. Format (strtemp, I, "[" + I + "]") ;}} if (currentpage! = Endpage & totalrecords! = 0) {If (currentpage! = Totalpages) Sb. append (string. format (strtemp, currentpage + 1, "Next page"); sb. append (string. format (strtemp, totalpages, "Last page");} response. write (sb. tostring (); response. end ();} /*** // <summary> // calculate the total number of pages /// </Summary> /// <Param name = "totalrecords"> total number of records </Param >/// <Param name = "pagesize"> Number of records per page </param> private int calculatetotalpages (INT totalrecords, int pagesize) {int totalpagesavailable; totalpagesavailable = totalrecords/pagesize; // Since the integer division of C # rounds all the remainder to 0, therefore, you need to determine whether to add 1 If (totalrecords % pagesize)> 0) totalpagesavailable ++; return totalpagesavailable ;}

 

So... The Ajax request page is complete. Next, we will display the displayed page number .. Of course, JSON is not used here. The Code is as follows:

 
$. Post ("/ajax/elec_comment/ajax_getdatacount.aspx", {pid: '<% = DOTNET. framework. common. querystring. qid ("ID") %> '}, function (data, status) {$ ("# pager" ).html (data); alert (data); bindclick (); // bindcommentlist (1) for the Click Event bound to tag a; // load the first page of Data bound by default to the page });
 

 

 function bindclick () {$ (" # pager "). click (function (e) {e. preventdefault (); // forbid direct connection var url = "/ajax/elec_comment/ajax_getdatacount.aspx"; var pid = '<% = DOTNET. framework. common. querystring. qid ("ID") %> '; var page = $ (This ). ATTR ("title"); var func = function (data) {$ ("# pager" ).html (data); bindcommentlist (PAGE ); // read the data bindclick () based on the current page; // call the Click Event bound to the tag again. If this event is not called, the page can be opened for the first time, this event will not be captured in the future.} $. Post (URL, {pid: PID, page: Page}, func) ;}

 
Here, we can use jquery ajax to display the page number ..
 

 
There is an interview, and the data will be read later. JSON-based method!