jquery ajax php+mysql 无刷新分页 详细实例

　　最近在接触jquery和ajax，当前项目也会用到分页，为了用户体验更好一些，就准备用无刷新分页，这个demo很适合新手学习查看，写的比较清晰，话不多说，直接上代码吧。

　　首先是html页面，index.html，代码如下：

<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>

 

　　样式我随便写的，毕竟我样式写的很差，大家可以自己换样式的。

　　然后就是js代码了，ajaxPager.js，代码如下：

　　

<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' alt="jquery ajax php+mysql 无刷新分页 详细实例" >"<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']+"' alt="jquery ajax php+mysql 无刷新分页 详细实例" ></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> });

 

　　因为项目的需要，我这个页面页数显示只能显示几页，比如就这样  >>，要改显示的，就在ajaxPager.js里面改。

　　$.ajax({ 中url: 'pages.php'，处理就在pages.php中处理。那么就来看看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> ?>

 

　　上面当然还有数据库连接了啦，这个应该很简单吧，还是贴出来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> ?>

 

　　然后就完成了，具体思路很清晰，点击页数的时候jquery获取rel中的页面值，传进去数据库获取相应数据展现在页面上。

　　然后还有数据库吧，我的表示这样的：

<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> ;

 我这边有一个demo，然后大家可以下载看看。多多指教。

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