Several examples of jquery ajax paging (with source code download)

Among the three jquery ajax pages, we use the jqurey paging plug-in directly and write the code in the source ecosystem. At the same time, each instance has its own source code. I hope it will help you.

Example 1

The core code is as follows:

The Code is as follows:	Copy code
$. Ajax ({ Url: url, DataType: 'json ', Data: data, Success: callback });

Can refer to the jquery official website PAI http://api.jquery.com/jQuery.getJSON/

The Code is as follows:

Copy code

Function changePagination (pageId, liId ){ $ (". Flash"). show (); $ (". Flash" 2.16.fadein(40020..html ('loading '); Var dataString = 'pageid = '+ pageId; $. Ajax ({ Type: "POST ", Url: "pageData. php ", Data: dataString, Cache: false, Success: function (result ){ $ (". Flash"). hide (); $ (". Link a" ).css ('background-color', '# fff '); $ ("#" + LiId + "a" ).css ('background-color', '#99A607 '); $ ("# PageData" pai.html (result ); } }); }

PHP_ajax_jquery paging source code download: http://file.bKjia. c0m/upload/2013/10/super_paging.rar

Example 2

Pagination Without Frame

I found a PHP_ajax_jquery page on the Internet and used the load method.

The Code is as follows:

Copy code

Function showLoader (){ $ ('. Search-background'). fadeIn (200 ); } Function hideLoader (){ $ ('. Search-background'). fadeOut (200 ); }; $ ("# Paging_button li"). click (function (){ ShowLoader (); $ ("# Paging_button li" ).css ({'background-color ':''}); Certificate (this).css ({'background-color': '#006699 '}); $ ("# Content"). load ("data. php? Page = "+ this. id, hideLoader ); Return false; }); $ ("#1" ).css ({'background-color': '#006699 '}); ShowLoader (); $ ("# Content"). load ("data. php? Page = 1 ", hideLoader ); });

P_a_JQUery paging packaging: http://file.bKjia. c0m/upload/2013/10/p_aj_Pagination.rar

Example 3

Or use the jqurey paging plug-in.

You only need to define a class and then modify the following parameters.

The Code is as follows:

Copy code

$ ("Ul. paging"). quickPager (); $ ("Ul. paging2"). quickPager ({pagerLocation: "both "}); (Function ($ ){ $. Fn. quickPager = function (options ){ Var defaults = { PageSize: 2, CurrentPage: 1, Holder: null, PagerLocation: "after" }; Var options = $. extend (defaults, options ); Return this. each (function (){ Var selector = $ (this ); Var pageCounter = 1; Selector. wrap ("<div class = 'simplepageriner iner '> </div> "); Selector. children (). each (function (I ){ If (I <pageCounter * options. pageSize & I >=( pageCounter-1) * options. pageSize ){ $ (This). addClass ("simplePagerPage" + pageCounter ); } Else { $ (This). addClass ("simplePagerPage" + (pageCounter + 1 )); PageCounter ++; } });

This instance source code download: http://file.bKjia. c0m/upload/2013/10/simplepager-master.rar