jquery ajax php+mysql 无刷新分页 详细实例_PHP教程
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原创
- 2016-07-20 11:15:15936浏览
最近在接触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 无刷新分页 详细实例_PHP教程" >"<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 无刷新分页 详细实例_PHP教程" ></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
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn