JQuery + Ajax + PHP + Mysql implement paging data display, jqueryajax

JQuery + Ajax + PHP + Mysql implement paging data display, jqueryajax

Css

<style type="text/css">        #loading{              position: absolute;              top: 200px;              left:400px;          }          #container .pagination ul li.inactive,          #container .pagination ul li.inactive:hover{              background-color:#ededed;              color:#bababa;              border:1px solid #bababa;              cursor: default;          }          #container .data ul li{              list-style: none;              margin: 5px 0 5px 50px;              color: #000;              font-size: 14px;          }          #container .pagination{              width: 1000px;              height: 25px;          }          #container .pagination ul li{              list-style: none;              float: left;              border: 1px solid #006699;              padding: 2px 6px 2px 6px;              margin: 0 3px 0 3px;              font-family: arial;              font-size: 14px;              color: #006699;              font-weight: bold;              background-color: #f2f2f2;          }          #container .pagination ul li:hover{              color: #fff;              background-color: #006699;              cursor: pointer;          }          .go_button{              background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;          }          .total{              float:left;font-family:arial;color:#999;          }      </style>  

Js

<script type="text/javascript">          $(document).ready(function(){              function loading_show(){                  $('#loading').html("    

Html

<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script><div id="main">      <div id="loading"></div>      <div id="container">          <div class="data"></div>          <div class="pagination"></div>      </div>  </div>

Php

<? Php if ($ _ POST ['page']) {$ page = $ _ POST ['page']; // the current page number $ cur_page = $ page; // The current page $ page-= 1; $ per_page = 10; $ previus_btn = true; $ next_btn = true; $ first_btn = true; $ last_btn = true; $ start = $ page * $ per_page; // 0 10 20 30 40 first page: page = 1 // database configuration information define ("HOST", "localhost "); // host name define ("USER", "root"); // account define ("PASS", "root"); // password define ("DBNAME ", "waterfall"); // database name $ link = mysql_connect ("Localhost", "root", "root") or die ("Database Connection Failed :". mysql_error (); mysql_select_db ("waterfall", $ link); mysql_query ("set NAMES 'utf8'"); $ query_page_data = "SELECT * FROM 'content' LIMIT $ start, $ per_page "; $ result_page_data = mysql_query ($ query_page_data) or die ('mysql error '. mysql_error (); $ msg = ""; while ($ row = mysql_fetch_array ($ result_page_data) {$ htmlmsg = htmlspecialchars ($ row ['img ']); $ msg. = "<Li> <B> ". $ row ['id']. "</B> ". $ htmlmsg. "</li>" ;}$ msg = "<div class = 'data'> <ul> ". $ msg. "</ul> </div>"; // data content/* ----------------------------------------------- */$ query_pag_num = "select count (*) AS count FROM content "; $ result_pag_num = mysql_query ($ query_pag_num); $ row = mysql_fetch_array ($ result_pag_num); $ count = $ row ['Count']; $ no_of_paginations = ceil ($ count/$ per_page );/*--- ------------ Calculate the starting and endign values of the loop */if ($ cur_page> = 7) {$ start_loop = $ cur_page-3; if ($ no_of_paginations> $ cur_page + 3) $ end_loop = $ cur_page + 3; else if ($ cur_page <= $ no_of_paginations & $ cur_page> $ no_of_paginations-6) {$ start_loop = $ no_of_paginations-6; $ end_loop = $ no_of_paginations;} else {$ start_loop = 1; if ($ no_of_paginations> 7) $ end_loop = 7; else $ end_loop = $ no_of_paginations;}/* dependencies */$ msg. = "<div class = 'pagination'> <ul>"; // if ($ first_btn & $ cur_page> 1) {$ msg. = "<li p = '1' class = 'active'> First </li>";} else if ($ first_btn) {$ msg. = "<li p = '1' class = 'inactive'> Firs T </li> ";}/// to make the previous button if ($ previus_btn & $ cur_page> 1) {$ pre = $ cur_page-1; $ msg. = "<li p = '$ pre' class = 'active'> Previous </li>";} else if ($ previus_btn) {$ msg. = "<li class = 'inactive'> Previous </li>" ;}for ($ I = $ start_loop; $ I <=$ end_loop; $ I ++) {if ($ cur_page = $ I) $ msg. = "<li p = '$ I' style = 'color: # fff; background-color: #006699; 'class = 'active' >{$ I} </li> "; else $ msg. = "<li p = '$ I' linoleic Ss = 'active' >{$ I} </li> ";}// make the next button if ($ next_btn & $ cur_page <$ no_of_paginations) {$ nex = $ cur_page + 1; $ msg. = "<li p = '$ nex' class = 'active'> Next </li>";} else if ($ next_btn) {$ msg. = "<li class = 'inactive'> Next </li>";} // if ($ last_btn & $ cur_page <$ no_of_paginations) {$ msg. = "<li p = '$ no_of_paginations' class = 'active'> Last </li>";} else if ($ last_btn) {$ msg. = "<li p = '$ no_of_p Aginations 'class = 'inactive'> Last </li> ";} $ goto = "<input type = 'text' class = 'Goto 'size = '1' style = 'float: left; margin-top:-1px; margin-left: 60px; '/> <input type = 'button 'id = 'go _ btn' class = 'go _ button' value = 'Go'/> "; $ total_string = "<span style = 'float: left; margin-left: 40px; 'class = 'Total' a = '$ no_of_paginations'> Page <B> ". $ cur_page. "</B> of <B> $ no_of_paginations </B> </span>"; $ msg = $ msg. "</ul>". $ Goto. $ total_string. "</div>"; // echo $ msg;}?>

Jquery ajax PHP updates data and displays it immediately

Function ajaxAction (searchid, obj ){
ImgObj = obj;
$. Ajax ({
Type: "GET ",
Url: "search. php ",
DataType: 'json ',
Data: "searchid =" + searchid + "& cache =" + new Date (). getTime (),
Success: function (msg ){
Certificate ('{jifen'}.html (msg. jifen );
('Your username'your .html (msg. username );
.............
}
});
}
</Script>
**************************************** *********************************
$ Arr = array ('jifen' => 111, 'username' => 'abc '........);
Echo json_encode ($ arr );
 
How can we achieve paging through ajax, html, and php?

There are many writing methods, such:
Html page:
<Div id = "shi"> </div>
Js:
$. Get ("1.php", {parameter}, function (data)
{
$ ("# Shi" ).html (data );
});

That is, when you click the previous or next page, a function is triggered to execute the above Code and put the returned content in <div id = "shi"> here </div>

Data is the content returned by the php file. The SQL statement should be written like this:
Select * from table order by id desc limit ($ page-1) * Number of each page, ($ page) * Number of each page

Jquery is used here.
Another idea is to read all the content from the database when loading for the first time, and then process the page with js in the browser, it is best to use json format when sending data in php, so as to better process