ajax頁面分頁效果的呈現

<a href="http://blog.51cto.com/attachment/201202/091247535.jpg" target="_blank"></a>

<a href="http://blog.51cto.com/attachment/201202/091254858.jpg" target="_blank"></a>

<a href="http://blog.51cto.com/attachment/201202/091303111.jpg" target="_blank"></a>

<a href="http://blog.51cto.com/attachment/201202/091310274.jpg" target="_blank"></a>

如果您想看到具體的例子，請下載下傳也行。分頁小程式.rar

在頁面上進行分頁。如果你想顯示這種效果的話，您可以參考一下。

<code>(</code><code>function</code><code>($){</code>

<code>    </code><code>$.GaapUtils = {</code>

<code>        </code><code>page : </code><code>function</code><code>(totalPage,pageNo,totalRow) {</code>

<code>            </code><code>totalPage = parseInt(totalPage);</code>

<code>            </code><code>pageNo = parseInt(pageNo);</code>

<code>            </code><code>var</code> <code>pageBar = </code><code>""</code><code>;</code>

<code>            </code> 

<code>            </code><code>if</code><code>(pageNo &gt; 0 &amp;&amp; totalPage &gt;= 1) {</code>

<code>                </code><code>//2014-01-20-han-add</code>

<code>                </code><code>pageBar += </code><code>"&lt;span class=\"pages\"&gt;共&lt;font color=\"blue\"&gt;"</code> <code>+ totalRow + </code><code>"&lt;/font&gt;條&lt;/span&gt;"</code><code>;</code>

<code>                </code><code>if</code><code>(pageNo &gt; 10) {</code>

<code>                    </code><code>pageBar += </code><code>"&lt;a style=\"cursor:pointer;\" title=\"前10頁\" onclick=\"go("</code> <code>+ (parseInt(pageNo)-10) + </code><code>")\"&gt;&amp;lt;前10頁&lt;/a&gt;"</code><code>;</code>

<code>                </code><code>}</code>

<code>                </code> 

<code>                </code><code>if</code><code>(pageNo &gt; 1){</code>

<code>                    </code><code>pageBar += </code><code>"&lt;a style=\"cursor:pointer;\" class=\"prev\" title=\"上一頁\" onclick=\"go("</code> <code>+ (parseInt(pageNo)-1) + </code><code>")\"&gt;&amp;lt;&lt;/a&gt;"</code><code>;</code>

<code>                </code><code>if</code><code>(totalPage &lt;= 6){</code>

<code>                    </code><code>for</code><code>(</code><code>var</code> <code>i = 1; i &lt;= totalPage; i++){</code>

<code>                        </code><code>if</code><code>(pageNo == i){</code>

<code>                            </code><code>pageBar += </code><code>"&lt;a style=\"cursor:pointer;\" class=\"current\" onclick=\"go("</code><code>+i+</code><code>")\"&gt;"</code><code>+i+</code><code>"&lt;/a&gt;"</code><code>;</code>

<code>                        </code><code>}</code><code>else</code><code>{</code>

<code>                            </code><code>pageBar+=</code><code>"&lt;a style=\"cursor:pointer;\" onclick=\"go("</code><code>+i+</code><code>")\"&gt;"</code><code>+i+</code><code>"&lt;/a&gt;"</code><code>;</code>

<code>                        </code><code>}</code>

<code>                    </code><code>}</code>

<code>                </code><code>}</code><code>else</code><code>{</code>

<code>                    </code><code>var</code> <code>start = pageNo;</code>

<code>                    </code><code>var</code> <code>add = 5;</code>

<code>                    </code><code>if</code><code>(pageNo &lt; 5){</code>

<code>                        </code><code>start = 1;</code>

<code>                        </code><code>add = add - start;</code>

<code>                    </code><code>}</code><code>else</code><code>{</code>

<code>                        </code><code>start = pageNo - 2;</code>

<code>                        </code><code>add = 2;</code>

<code>                        </code><code>pageBar += </code><code>"&lt;a style=\"cursor:pointer;\" onclick=\"go("</code><code>+1+</code><code>")\"&gt;1&lt;/a&gt;"</code><code>;</code>

<code>                        </code><code>pageBar += </code><code>"&lt;span&gt;...&lt;/span&gt;"</code><code>;</code>

<code>                    </code><code>var</code> <code>end = pageNo + add;</code>

<code>                    </code><code>if</code><code>(end &gt; totalPage){</code>

<code>                        </code><code>end = totalPage;</code>

<code>                    </code><code>if</code><code>((end - pageNo) &gt; 2){</code>

<code>                        </code><code>end = pageNo + 2;</code>

<code>                    </code><code>if</code><code>(end &gt; add){</code>

<code>                     </code><code>if</code><code>(end - start &lt; add){</code>

<code>                        </code><code>start = end - add;</code>

<code>                     </code><code>}</code>

<code>                    </code> 

<code>                    </code><code>for</code><code>(</code><code>var</code> <code>i = start;i &lt;= end; i++){</code>

<code>                           </code><code>if</code><code>(pageNo == i){</code>

<code>                               </code><code>pageBar += </code><code>"&lt;a style=\"cursor:pointer;\" class=\"current\" onclick=\"go("</code><code>+i+</code><code>")\"&gt;"</code><code>+i+</code><code>"&lt;/a&gt;"</code><code>;</code>

<code>                           </code><code>}</code><code>else</code><code>{</code>

<code>                               </code><code>pageBar += </code><code>"&lt;a style=\"cursor:pointer;\" onclick=\"go("</code><code>+i+</code><code>")\"&gt;"</code><code>+i+</code><code>"&lt;/a&gt;"</code><code>;</code>

<code>                           </code><code>}</code>

<code>                    </code><code>if</code><code>( totalPage - end &gt; 0){</code>

<code>                        </code><code>if</code><code>(totalPage - end &gt; 1){</code>

<code>                          </code><code>pageBar+=</code><code>"&lt;span&gt;...&lt;/span&gt;"</code><code>;</code>

<code>                        </code><code>pageBar += </code><code>"&lt;a style=\"cursor:pointer;\" onclick=\"go("</code><code>+totalPage+</code><code>")\"&gt;"</code><code>+totalPage+</code><code>"&lt;/a&gt;"</code><code>;</code>

<code>                 </code><code>}</code>

<code>                </code><code>if</code><code>(pageNo&lt;totalPage){</code>

<code>                    </code><code>pageBar+=</code><code>"&lt;a style=\"cursor:pointer;\" class=\"next\" title=\"下一頁\" onclick=\"go("</code><code>+ (parseInt(pageNo)+1) +</code><code>")\"&gt;&amp;gt;&lt;/a&gt;"</code><code>;</code>

<code>                </code><code>if</code><code>((parseInt(pageNo)+10) &lt;= totalPage) {</code>

<code>                    </code><code>pageBar+=</code><code>"&lt;a style=\"cursor:pointer;\" title=\"後10頁\" onclick=\"go("</code><code>+ (parseInt(pageNo)+10) +</code><code>")\"&gt;後10頁&amp;gt;&lt;/a&gt;"</code><code>;</code>

<code>            </code><code>}</code>

<code>            </code><code>return</code> <code>pageBar;</code>

<code>        </code><code>}</code>

<code>})(jQuery);</code>

<code>&lt;!--分頁--&gt;</code>

<code> </code><code>&lt;div class=</code><code>"fpage"</code> <code>id=</code><code>"pages"</code><code>&gt;&lt;/div&gt;</code>

<code>                        </code><code>/**</code>

<code>                </code><code>顯示分頁樣式</code>

<code>            </code><code>*/</code>

<code>            </code><code>var</code> <code>totalPage = </code><code>"${pageBean.totalPage }"</code><code>;</code>

<code>            </code><code>var</code> <code>pageNo = </code><code>"${pageBean.pageNo}"</code><code>;</code>

<code>            </code><code>var</code> <code>totalRow = </code><code>"${pageBean.totalRow}"</code><code>;</code>

<code>            </code><code>if</code><code>(totalPage &amp;&amp; totalPage &gt;= 1) {</code>

<code>                </code><code>$(</code><code>"#pages"</code><code>).html($.GaapUtils.page(totalPage,pageNo,totalRow));</code>

<code></code>

     本文轉自韓立偉 51CTO部落格，原文連結：http://blog.51cto.com/hanchaohan/788274，如需轉載請自行聯系原作者