Ajax implements paging and paging queries, and ajax implements Paging

Ajax implements paging and paging queries, and ajax implements Paging

I have previously written ajax to load pages, which is very simple and convenient to write without refresh the pages. The pages written today do not need to be encapsulated. class. php is written in JavaScript and ajax.

First, to make the page neat and beautiful, I used bootstrap and needed to introduce the required file packages.

<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css" /><script src="../jquery/jquery-1.11.2.min.js"></script><script src="dist/js/bootstrap.min.js"></script>

The following content is displayed on the page.

<Div> <input type = "text" id = "name"/> <input type = "button" value = "query" id = "chaxun"/> </div> <br/> <table class = "table-striped"> <thead> <tr> <th width = "30%"> Country Code </th> <th width =" 30% "> country name </th> <th width =" 40% "> parent Code </th> </tr> </thead> <tbody id =" tb "> </tbody> </table> <br/> <div> <ul class = "pagination" id = "fenye"> </ul> </div>

Below is the js part, written using ajax

<Script type = "text/javascript"> var page = 1; // current page // Load data (); // Load page information LoadFenYe (); // Add a click event to the query $ ("# chaxun "). click (function () {// reset the current page to 1; // Load data Load (); // Load the page information LoadFenYe ();}) // Method for loading paging information function LoadFenYe () {var s = ""; var name = $ ("# name "). val (); var minys = 1; var maxys = 1; $. ajax ({async: false, data: {name: name}, type: "POST", url: "zys. php ", dataType:" TEXT ", success: function (data) {maxys = data ;}}); // load the Previous Page s + = "<li class = 'syy'> <a> «</a> </li> "; // load the page list for (var I = page-4; I <page + 5; I ++) {if (I> = minys & I <= maxys) {if (I = page) {s + = "<li class = 'Active list'> <a>" + I + "</a> </li> ";} else {s + = "<li class = 'LIST'> <a>" + I + "</a> </li> ";}}} // load the next page s + = "<li class = 'xyy'> <a>» </a> </li> "; // display the pagination list $ ("# fenye" ).html (s); // Add a click event to the list $ (". list "). click (function () {// change current page = $ (this ). text (); // Load data Load (); // Load the page information LoadFenYe () ;}) // Add a click event on the previous page $ (". syy "). click (function () {// change the current page if (page> 1) {page = parseInt (page)-1; // Load data (); // load the page information LoadFenYe () ;}}) // Add a click event on the next page $ (". xyy "). click (function () {// change the current page if (page <maxys) {page = parseInt (page) + 1; // Load data Load (); // load the page information LoadFenYe ();}})}

// Function Load () {var name = $ ("# name") method for loading data "). val (); $. ajax ({url: "jiazai. php ", data: {page: page, name: name}, type:" POST ", dataType:" TEXT ", success: function (data) {var str = ""; var hang = data. split ("|"); for (var I = 0; I 
The code for the jiazai. php page is as follows:
<?phpinclude("DADB.class.php");$db=new DADB();$page=$_POST["page"];$key=$_POST["name"];$num=20;$tiao=($page-1)*$num;$sql="select * from chinastates WHERE areaname like '%{$key}%' limit {$tiao},{$num}";echo $db->StrQuery($sql,1);
The zys. php code is as follows:
<? Phpinclude ("DADB. class. php "); $ db = new DADB (); $ key = $ _ POST [" name "]; $ SQL =" select count (*) from chinastates where areaname like '% {$ key} %' "; // display the total number of items $ zts = $ db-> StrQuery ($ SQL ); echo ceil ($ zts/20 );
In this way, the paging and query functions can be fully implemented.
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!