最近在接触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

PHP仍然流行的原因是其易用性、靈活性和強大的生態系統。 1)易用性和簡單語法使其成為初學者的首選。 2)與web開發緊密結合,處理HTTP請求和數據庫交互出色。 3)龐大的生態系統提供了豐富的工具和庫。 4)活躍的社區和開源性質使其適應新需求和技術趨勢。

PHP和Python都是高層次的編程語言,廣泛應用於Web開發、數據處理和自動化任務。 1.PHP常用於構建動態網站和內容管理系統,而Python常用於構建Web框架和數據科學。 2.PHP使用echo輸出內容,Python使用print。 3.兩者都支持面向對象編程,但語法和關鍵字不同。 4.PHP支持弱類型轉換,Python則更嚴格。 5.PHP性能優化包括使用OPcache和異步編程,Python則使用cProfile和異步編程。

PHP主要是過程式編程,但也支持面向對象編程(OOP);Python支持多種範式,包括OOP、函數式和過程式編程。 PHP適合web開發,Python適用於多種應用,如數據分析和機器學習。

PHP起源於1994年,由RasmusLerdorf開發,最初用於跟踪網站訪問者,逐漸演變為服務器端腳本語言,廣泛應用於網頁開發。 Python由GuidovanRossum於1980年代末開發,1991年首次發布,強調代碼可讀性和簡潔性,適用於科學計算、數據分析等領域。

PHP適合網頁開發和快速原型開發,Python適用於數據科學和機器學習。 1.PHP用於動態網頁開發,語法簡單,適合快速開發。 2.Python語法簡潔,適用於多領域,庫生態系統強大。

PHP在現代化進程中仍然重要,因為它支持大量網站和應用,並通過框架適應開發需求。 1.PHP7提升了性能並引入了新功能。 2.現代框架如Laravel、Symfony和CodeIgniter簡化開發,提高代碼質量。 3.性能優化和最佳實踐進一步提升應用效率。

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

PHP類型提示提升代碼質量和可讀性。 1)標量類型提示:自PHP7.0起,允許在函數參數中指定基本數據類型,如int、float等。 2)返回類型提示:確保函數返回值類型的一致性。 3)聯合類型提示:自PHP8.0起,允許在函數參數或返回值中指定多個類型。 4)可空類型提示:允許包含null值,處理可能返回空值的函數。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3漢化版
中文版,非常好用

Atom編輯器mac版下載
最受歡迎的的開源編輯器

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)