Community Learn Tools Library Leisure
search
English
Home > Backend Development > PHP Tutorial > jquery ajax php+mysql no refresh paging detailed examples_PHP tutorial

jquery ajax php+mysql no refresh paging detailed examples_PHP tutorial

WBOY
Release： 2016-07-20 11:15:15
Original
865 people have browsed it

Recently I have been exposed to jquery and ajax. The current project will also use paging. In order to have a better user experience, I am going to use non-refresh paging. This demo is very suitable for novices to learn and view. The writing is clearer and the words are not easy to read. Say more, let’s go directly to the code.

First is the html page, index.html, the code is as follows: 

<span  1</span> <span <!</span><span DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span ></span>
<span  2</span> <span <</span><span html </span><span xmlns</span><span ="http://www.w3.org/1999/xhtml"</span><span ></span>
<span  3</span> <span <</span><span head</span><span ></span>
<span  4</span> <span <</span><span meta </span><span http-equiv</span><span ="Content-Type"</span><span  content</span><span ="text/html; charset=utf-8"</span> <span /></span>
<span  5</span> <span <</span><span title</span><span ></span>php+mysql+ajax+jquery分页<span </</span><span title</span><span ></span>
<span  6</span> 
<span  7</span> <span <</span><span script </span><span type</span><span ="text/javascript"</span><span  src</span><span ="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"</span><span ></</span><span script</span><span ></span>
<span  8</span> <span <</span><span script </span><span type</span><span ="text/javascript"</span><span  src</span><span ="ajaxPager.js"</span><span ></</span><span script</span><span ></span>
<span  9</span> <span <</span><span style</span><span ></span>
<span 10</span> <span     #main</span><span {</span>
<span 11</span> <span         width</span><span :</span><span 980px</span><span ;</span>
<span 12</span> <span         margin</span><span :</span><span 0px auto</span><span ;</span>
<span 13</span>     <span }</span>
<span 14</span> <span     ul
</span><span 15</span>     <span {</span>
<span 16</span> <span         list-style</span><span :</span><span none</span><span ;</span>
<span 17</span> <span         margin</span><span :</span><span 0px</span><span ;</span>
<span 18</span>     <span }</span>
<span 19</span> <span     #list li</span><span {</span>
<span 20</span> <span         width</span><span :</span><span 220px</span><span ;</span>
<span 21</span> <span         height</span><span :</span><span 280px</span><span ;</span>
<span 22</span> <span         float</span><span :</span><span left</span><span ;</span>
<span 23</span> <span         margin-left</span><span :</span><span 10px</span><span ;</span>
<span 24</span>     <span }</span>
<span 25</span> <span     .pager .cur </span><span {</span>
<span 26</span> <span         border-top-color</span><span :</span><span  rgb(255, 255, 255)</span><span ;</span>
<span 27</span> <span         border</span><span :</span><span  1px solid #fff</span><span ;</span>
<span 28</span> <span         background</span><span :</span><span  0</span><span ;</span>
<span 29</span> <span         font-weight</span><span :</span><span  bold</span><span ;</span>
<span 30</span> <span         color</span><span :</span><span  #000</span><span ;</span>
<span 31</span>     <span }</span>
<span 32</span> <span     .pager a, .pager span </span><span {</span>
<span 33</span> <span         margin-top</span><span :</span><span  5px</span><span ;</span>
<span 34</span>     <span }</span>
<span 35</span> <span     .pager a, .pager span </span><span {</span>
<span 36</span> <span         background</span><span :</span><span  none repeat scroll 0 0 #fff</span><span ;</span>
<span 37</span> <span         border</span><span :</span><span  1px solid #e7ecf0</span><span ;</span>
<span 38</span> <span         color</span><span :</span><span  #0000cd</span><span ;</span>
<span 39</span> <span         float</span><span :</span><span  left</span><span ;</span>
<span 40</span> <span         height</span><span :</span><span  22px</span><span ;</span>
<span 41</span> <span         line-height</span><span :</span><span  22px</span><span ;</span>
<span 42</span> <span         margin-right</span><span :</span><span  5px</span><span ;</span>
<span 43</span> <span         overflow</span><span :</span><span  hidden</span><span ;</span>
<span 44</span> <span         text-align</span><span :</span><span  center</span><span ;</span>
<span 45</span> <span         text-decoration</span><span :</span><span  none</span><span ;</span>
<span 46</span> <span         width</span><span :</span><span  auto</span><span ;</span>
<span 47</span> <span         padding</span><span :</span><span  0 8px</span><span ;</span>
<span 48</span>     <span }</span>
<span 49</span> <span     .pager span </span><span {</span>
<span 50</span> <span         background</span><span :</span><span  none repeat scroll 0 0 #fff</span><span ;</span>
<span 51</span> <span         border</span><span :</span><span  1px solid #e7ecf0</span><span ;</span>
<span 52</span> <span         color</span><span :</span><span  #0000cd</span><span ;</span>
<span 53</span> <span         float</span><span :</span><span  left</span><span ;</span>
<span 54</span> <span         height</span><span :</span><span  22px</span><span ;</span>
<span 55</span> <span         line-height</span><span :</span><span  22px</span><span ;</span>
<span 56</span> <span         margin-right</span><span :</span><span  5px</span><span ;</span>
<span 57</span> <span         overflow</span><span :</span><span  hidden</span><span ;</span>
<span 58</span> <span         text-align</span><span :</span><span  center</span><span ;</span>
<span 59</span> <span         text-decoration</span><span :</span><span  none</span><span ;</span>
<span 60</span> <span         width</span><span :</span><span  auto</span><span ;</span>
<span 61</span> <span         padding</span><span :</span><span  0 8px</span><span ;</span>
<span 62</span>     <span }</span>
<span 63</span> <span     .pager </span><span {</span>
<span 64</span> <span         border-top</span><span :</span><span  0</span><span ;</span>
<span 65</span> <span         padding</span><span :</span><span  12px 0 30px 15px</span><span ;</span>
<span 66</span> <span         float</span><span :</span><span  left</span><span ;</span>
<span 67</span>     <span }</span>
<span 68</span> <span     .clearfix </span><span {</span>
<span 69</span> <span         display</span><span :</span><span  block</span><span ;</span>
<span 70</span>     <span }</span>
<span 71</span> <span     .pager </span><span {</span>
<span 72</span> <span         float</span><span :</span><span  left</span><span ;</span>
<span 73</span> <span         font-family</span><span :</span><span  Arial</span><span ;</span>
<span 74</span> <span         font-size</span><span :</span><span  13px</span><span ;</span>
<span 75</span>     <span }</span>
<span 76</span> <span     .clearfix </span><span {</span>
<span 77</span> <span     zoom</span><span :</span><span  1</span><span ;</span>
<span 78</span>     <span }</span>
<span 79</span> <span </</span><span style</span><span ></span>
<span 80</span> 
<span 81</span> 
<span 82</span> <span </</span><span head</span><span ></span>
<span 83</span> 
<span 84</span> <span <</span><span body</span><span ></span>
<span 85</span> 
<span 86</span> 
<span 87</span>     <span <</span><span div </span><span id</span><span ="main"</span><span ></span>
<span 88</span>         <span <</span><span div </span><span id</span><span ="pagecount"</span><span  class</span><span ="pager clearfix"</span><span ></</span><span div</span><span ><</span><span div </span><span id</span><span ="loading"</span><span ></</span><span div</span><span ></span>
<span 89</span>         <span <</span><span br </span><span /></span>
<span 90</span>         <span <</span><span br </span><span /></span>
<span 91</span>         <span <</span><span br </span><span /></span>
<span 92</span>         <span <</span><span br </span><span /></span>
<span 93</span>         <span <</span><span div </span><span id</span><span ="list"</span><span ></span>
<span 94</span>             <span <</span><span ul</span><span ></</span><span ul</span><span ></span>
<span 95</span>         <span </</span><span div</span><span ></span>
<span 96</span>     <span </</span><span div</span><span ></span>
<span 97</span> <span </</span><span body</span><span ></span>
<span 98</span> <span </</span><span html</span><span ></span>
Copy after login

I wrote the style casually. After all, my style writing is very poor. You can change the style yourself.

Then there is the js code, ajaxPager.js, the code is as follows:

　

<span   1</span> <span var</span> curPage = 1; <span //</span><span 当前页码</span>
<span   2</span> <span var</span><span  total,pageSize,totalPage;
</span><span   3</span> <span //</span><span 获取数据</span>
<span   4</span> <span function</span><span  getData(page){ 
</span><span   5</span> <span     $.ajax({
</span><span   6</span>         type: 'POST'<span ,
</span><span   7</span>         url: 'pages.php'<span ,
</span><span   8</span>         data: {'pageNum':page-1<span },
</span><span   9</span>         dataType:'json'<span ,
</span><span  10</span>         beforeSend:<span function</span><span (){
</span><span  11</span>             $("#loading").html("<img id='loadin'g src='loading.gif'>"<span );
</span><span  12</span> <span         },
</span><span  13</span>         success:<span function</span><span (json){
</span><span  14</span>             $("#loading").html(""<span );
</span><span  15</span>             $("#list ul"<span ).empty();
</span><span  16</span>             total = json.total; <span //</span><span 总记录数</span>
<span  17</span>             pageSize = json.pageSize; <span //</span><span 每页显示条数</span>
<span  18</span>             curPage = page; <span //</span><span 当前页</span>
<span  19</span>             totalPage = json.totalPage; <span //</span><span 总页数</span>
<span  20</span>             <span var</span> li = ""<span ;
</span><span  21</span>             <span var</span> list =<span  json.list;
</span><span  22</span>             $.each(list,<span function</span>(index,array){ <span //</span><span 遍历json数据列</span>
<span  23</span>                 li += "<li><a href='#'><img src='"+array['pic']+"'></a><p>"+array['title'].substring(0,10)+"</p></li>"<span ;
</span><span  24</span> <span             });
</span><span  25</span>             $("#list ul"<span ).append(li);
</span><span  26</span> <span         },
</span><span  27</span>         complete:<span function</span>(){ <span //</span><span 生成分页条</span>
<span  28</span> <span             getPageBar();
</span><span  29</span> <span         },
</span><span  30</span>         error:<span function</span><span (){
</span><span  31</span>             alert("数据加载失败"<span );
</span><span  32</span> <span         }
</span><span  33</span> <span     });
</span><span  34</span> <span }
</span><span  35</span> 
<span  36</span> <span //</span><span 获取分页条</span>
<span  37</span> <span function</span><span  getPageBar(){
</span><span  38</span>     <span //</span><span 页码大于最大页数</span>
<span  39</span>     <span if</span>(curPage>totalPage) curPage=<span totalPage;
</span><span  40</span>     <span //</span><span 页码小于1</span>
<span  41</span>     <span if</span>(curPage<1) curPage=1<span ;
</span><span  42</span>     pageStr = "<span class=''>共"+total+"条"+curPage+"/"+totalPage+"</span>"<span ;
</span><span  43</span>     
<span  44</span>     <span //</span><span 如果是第一页</span>
<span  45</span>     <span if</span>(totalPage<=4<span )
</span><span  46</span> <span     {
</span><span  47</span>         <span if</span>(curPage==1<span ){
</span><span  48</span>             pageStr += "<span class='cur'>1</span>"<span ;
</span><span  49</span>             <span for</span>(<span var</span> i=2;i<=totalPage;i++<span )
</span><span  50</span> <span             {
</span><span  51</span>                 pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span  52</span> <span             }
</span><span  53</span>         }<span else</span><span {
</span><span  54</span>             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"<span ;
</span><span  55</span>             <span for</span>(<span var</span> i=1;i<=totalPage;i++<span )
</span><span  56</span> <span             {
</span><span  57</span>                 <span if</span>(i==<span curPage)
</span><span  58</span> <span                 {
</span><span  59</span>                     pageStr += "<span class='cur'>"+i+"</span>"
<span  60</span> <span                 }
</span><span  61</span>                 <span else</span>
<span  62</span> <span                 {
</span><span  63</span>                     pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span  64</span> <span                 }
</span><span  65</span> <span             }
</span><span  66</span>             
<span  67</span> <span         }
</span><span  68</span> <span     }
</span><span  69</span>     <span else</span><span //</span><span 当页数大于5的时候就要这样显示1 2 3 4 ...</span>
<span  70</span> <span     {
</span><span  71</span>         <span if</span>(curPage<=3<span ){
</span><span  72</span>             <span if</span>(curPage==1<span )
</span><span  73</span> <span             {
</span><span  74</span>                 pageStr += "<span class='cur'>1</span>"<span ;
</span><span  75</span> <span             }
</span><span  76</span>             <span else</span>
<span  77</span> <span             {
</span><span  78</span>                 pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"<span ;
</span><span  79</span>                 pageStr += "<span class='cur'><a href='javascript:void(0)' rel='1'>1</a></span>"<span ;
</span><span  80</span> <span             }
</span><span  81</span>             <span for</span>(<span var</span> i=2;i<=4;i++<span )
</span><span  82</span> <span             {
</span><span  83</span>                 <span if</span>(i==<span curPage)
</span><span  84</span> <span                 {
</span><span  85</span>                     pageStr += "<span class='cur'>"+i+"</span>"
<span  86</span> <span                 }
</span><span  87</span>                 <span else</span>
<span  88</span> <span                 {
</span><span  89</span>                     pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span  90</span> <span                 }
</span><span  91</span> <span             }
</span><span  92</span>             pageStr += "<span class='cur'>...</span>"<span ;
</span><span  93</span>         }<span else</span><span {
</span><span  94</span>             pageStr += "<a href='javascript:void(0)' rel='1'><<</a><a href='javascript:void(0)' rel='"+(curPage-1)+"'><</a>"<span ;
</span><span  95</span>             pageStr += "<span class='cur'>...</span>"<span ;
</span><span  96</span>             <span if</span>(curPage>totalPage-2<span )
</span><span  97</span> <span             {
</span><span  98</span>                 <span for</span>(<span var</span> i=totalPage-2;i<=totalPage;i++<span )
</span><span  99</span> <span                 {
</span><span 100</span>                     <span if</span>(i==<span curPage)
</span><span 101</span> <span                     {
</span><span 102</span>                         pageStr += "<span class='cur'>"+i+"</span>"
<span 103</span> <span                     }
</span><span 104</span>                     <span else</span>
<span 105</span> <span                     {
</span><span 106</span>                         pageStr += "<a href='javascript:void(0)' rel='"+i+"'>"+i+"</a>"<span ;
</span><span 107</span> <span                     }
</span><span 108</span> <span                 }
</span><span 109</span> <span             }
</span><span 110</span>             <span else</span>
<span 111</span> <span             {
</span><span 112</span>                 pageStr += "<a href='javascript:void(0)' rel='"+(curPage-1)+"'>"+(curPage-1)+"</a>"<span ;
</span><span 113</span>                 pageStr += "<span class='cur'>"+curPage+"</span>"<span ;
</span><span 114</span>                 pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>"+(parseInt(curPage)+1)+"</a>"<span ;
</span><span 115</span>                 pageStr += "<span class='cur'>...</span>"<span ;
</span><span 116</span> <span             }
</span><span 117</span> <span         }
</span><span 118</span> <span     }
</span><span 119</span>     <span //</span><span 如果是最后页</span>
<span 120</span>     <span if</span>(curPage>=<span totalPage){
</span><span 121</span>         <span //</span><span pageStr += "<span>></span>   <span>>></span>";</span>
<span 122</span>     }<span else</span><span {
</span><span 123</span>         pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>></a><a href='javascript:void(0)' rel='"+totalPage+"'>>></a>"<span ;
</span><span 124</span> <span     }
</span><span 125</span>         
<span 126</span>     $("#pagecount"<span ).html(pageStr);
</span><span 127</span> <span }
</span><span 128</span> 
<span 129</span> $(<span function</span><span (){
</span><span 130</span>     getData(1<span );
</span><span 131</span>     $("#pagecount  a").live('click',<span function</span><span (){
</span><span 132</span>         <span var</span> rel = $(<span this</span>).attr("rel"<span );
</span><span 133</span>         <span if</span><span (rel){
</span><span 134</span> <span             getData(rel);
</span><span 135</span> <span         }
</span><span 136</span> <span     });
</span><span 137</span> });
Copy after login

Due to the needs of the project, the page number display on my page can only display a few pages. For example, it is like this << < ... 5 6 7 ... > Just change it in ajaxPager.js.

　$.ajax({ url: 'pages.php', the processing is done in pages.php. Then let’s take a look at the code in pages.php:

　

<span  1</span> <?<span php
</span><span  2</span> <span include_once</span>('connect.php'<span );
</span><span  3</span> 
<span  4</span> <span $page</span> = <span intval</span>(<span $_POST</span>['pageNum'<span ]);
</span><span  5</span> 
<span  6</span> <span $result</span> = <span mysql_query</span>("select id from food"<span );
</span><span  7</span> <span $total</span> = <span mysql_num_rows</span>(<span $result</span>);<span //</span><span 总记录数</span>
<span  8</span> 
<span  9</span> <span $pageSize</span> = 8; <span //</span><span 每页显示数</span>
<span 10</span> <span $totalPage</span> = <span ceil</span>(<span $total</span>/<span $pageSize</span>); <span //</span><span 总页数</span>
<span 11</span> 
<span 12</span> <span $startPage</span> = <span $page</span>*<span $pageSize</span><span ;
</span><span 13</span> <span $arr</span>['total'] = <span $total</span><span ;
</span><span 14</span> <span $arr</span>['pageSize'] = <span $pageSize</span><span ;
</span><span 15</span> <span $arr</span>['totalPage'] = <span $totalPage</span><span ;
</span><span 16</span> <span $query</span> = <span mysql_query</span>("select id,title,pic from food order by id asc limit <span $startPage</span>,<span $pageSize</span>"<span );
</span><span 17</span> <span while</span>(<span $row</span>=<span mysql_fetch_array</span>(<span $query</span><span )){
</span><span 18</span>      <span $arr</span>['list'][] = <span array</span><span (
</span><span 19</span>          'id' => <span $row</span>['id'],
<span 20</span>         'title' => <span $row</span>['title'],
<span 21</span>         'pic' => <span $row</span>['pic'],
<span 22</span> <span      );
</span><span 23</span> <span }
</span><span 24</span> <span //</span><span print_r($arr);</span>
<span 25</span> <span echo</span> json_encode(<span $arr</span><span );
</span><span 26</span> ?>
Copy after login
Copy after login

Of course there is a database connection above. This should be very simple, so I’d better post connect.php:

　

<span  1</span> <?<span php
</span><span  2</span> <span include_once</span>('connect.php'<span );
</span><span  3</span> 
<span  4</span> <span $page</span> = <span intval</span>(<span $_POST</span>['pageNum'<span ]);
</span><span  5</span> 
<span  6</span> <span $result</span> = <span mysql_query</span>("select id from food"<span );
</span><span  7</span> <span $total</span> = <span mysql_num_rows</span>(<span $result</span>);<span //</span><span 总记录数</span>
<span  8</span> 
<span  9</span> <span $pageSize</span> = 8; <span //</span><span 每页显示数</span>
<span 10</span> <span $totalPage</span> = <span ceil</span>(<span $total</span>/<span $pageSize</span>); <span //</span><span 总页数</span>
<span 11</span> 
<span 12</span> <span $startPage</span> = <span $page</span>*<span $pageSize</span><span ;
</span><span 13</span> <span $arr</span>['total'] = <span $total</span><span ;
</span><span 14</span> <span $arr</span>['pageSize'] = <span $pageSize</span><span ;
</span><span 15</span> <span $arr</span>['totalPage'] = <span $totalPage</span><span ;
</span><span 16</span> <span $query</span> = <span mysql_query</span>("select id,title,pic from food order by id asc limit <span $startPage</span>,<span $pageSize</span>"<span );
</span><span 17</span> <span while</span>(<span $row</span>=<span mysql_fetch_array</span>(<span $query</span><span )){
</span><span 18</span>      <span $arr</span>['list'][] = <span array</span><span (
</span><span 19</span>          'id' => <span $row</span>['id'],
<span 20</span>         'title' => <span $row</span>['title'],
<span 21</span>         'pic' => <span $row</span>['pic'],
<span 22</span> <span      );
</span><span 23</span> <span }
</span><span 24</span> <span //</span><span print_r($arr);</span>
<span 25</span> <span echo</span> json_encode(<span $arr</span><span );
</span><span 26</span> ?>
Copy after login
Copy after login

Then it’s done. The specific idea is very clear. When you click on the page number, jquery gets the page value in rel and passes it into the database to get the corresponding data and displays it on the page.

Then there is the database, mine looks like this: 

<span>1</span> <span>CREATE</span> <span>TABLE</span> <span>IF</span> <span>NOT</span> <span>EXISTS</span><span> `food` (
</span><span>2</span>   `id` <span>int</span>(<span>11</span>) <span>NOT</span> <span>NULL</span><span> AUTO_INCREMENT,
</span><span>3</span>   `title` <span>varchar</span>(<span>100</span>) <span>NOT</span> <span>NULL</span><span>,
</span><span>4</span>   `pic` <span>varchar</span>(<span>255</span>) <span>NOT</span> <span>NULL</span><span>,
</span><span>5</span>   <span>PRIMARY</span> <span>KEY</span><span> (`id`)
</span><span>6</span> ) ENGINE<span>=</span>MyISAM  <span>DEFAULT</span> CHARSET<span>=</span>utf8 AUTO_INCREMENT<span>=</span><span>31</span> ;
Copy after login

I have a demo here, and you can download it and take a look. Please give me some advice.

http://pan.baidu.com/share/link?shareid=1518322039&uk=67299903

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/440223.htmlTechArticleI have recently been exposed to jquery and ajax, and the current project will also use paging. In order to have a better user experience, I am preparing Use non-refresh paging. This demo is very suitable for novices to learn and view, and the writing is relatively clear...
Related labels：
ajax jquery php+mysql Pagination refresh and Example most detailed
source：php.cn
Previous article：facebook's HipHop for PHP: Move Fast_PHP教程 Next article：zend 2.2 db select usage example_PHP tutorial
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
From 2024-04-04 17:27:27
0
1
417
Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
From 2024-04-04 12:53:48
0
1
303
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template