JQuery中怎么實現(xiàn)一個分頁程序
這篇文章將為大家詳細講解有關JQuery中怎么實現(xiàn)一個分頁程序，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設計制作、成都網(wǎng)站設計與策劃設計,河池網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:河池等地區(qū)。河池做網(wǎng)站價格咨詢:18980820575
首先Default.aspx頁面需要引用的JS文件
Default.aspx頁面js代碼，如下,每頁條數(shù)可以自定義，也可以放置配置文件中，queryString函數(shù)是根據(jù)URL參數(shù)名稱，獲取參數(shù)的值
<script type="text/javascript"> var pagesize = 10; var page = thispage(); $(document).ready(function () { ajaxList(page); }); function queryString(pname) { var query = location.search.substring(1); var str = ""; params = query.split("&"); if (params.length > 0) { for (var n in params) { var pairs = params[n].split("="); if (pairs[0] == pname) { str = pairs[1]; break; } } } return str; } function thispage() { var r = /^[1-9][0-9]*$/; if (queryString('page') == '') return 1; if (r.test(queryString('page'))) return parseInt(queryString('page')); else return 1; } function ajaxList(currentpage) { if (currentpage != null) page = currentpage; $.ajax({ type: "get",//get類型，獲取用QueryString方法，post類型，用Form獲取傳值 dataType: "json", data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(), url: "Member_Ajax.aspx", error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); }, success: function (d) { switch (d.result) { case '-1': Alert(d.returnval); break; case '0': Alert(d.returnval); break; case '1': $("#ajaxList").setTemplateElement("tplList", null, { filter_data: true }); $("#ajaxList").processTemplate(d); $("#ajaxPageBar").html(d.pagebar); break; } } }); } </script>Default.aspx頁面Form代碼如下，頁面數(shù)據(jù)使用JQuery jTemplates綁定數(shù)據(jù)，非常方便，只需設置JSON格式數(shù)據(jù)，引用JS文件即可
<textarea id="tplList" style="display: none"> <table class="cooltable" width="300px"> <thead> <tr> <th align="center" scope="col" style="width:30px;"><input onclick="checkAllLine()" id="checkedAll" name="checkedAll" type="checkbox" title="全部選擇/全部不選" /></th> <th scope="col" style="width:60px;">ID</th> <th width="120px">姓名</th> <th scope="col" width="60px">年齡</th> </tr> </thead> <tbody> {#foreach $T.table as record} <tr> <td align="center"> <input class="checkbox" name="selectID" type="checkbox" value='{$T.record.MemberNo}' /> </td> <td align="center">{$T.record.Id}</td> <td align="left"> {$T.record.Name} </td> <td align="left"> {$T.record.Age} </td> </tr> {#/for} </tbody> </table> </textarea> <div id="ajaxList" style="width:500px;"> </div><br /> <div id="ajaxPageBar" style="width:500px;"> </div>$T.record.Id 中Id對應的是實體類Id屬性
上面Javascript方法中用到Member_Ajax.aspx頁面代碼如下，注意：這里是將數(shù)據(jù)已JSON格式輸出到頁面，配合JQuery數(shù)據(jù)模板使用，所有Member_Ajax.aspx頁面，不應該包含Html標簽，其代碼格式如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Member_Ajax.aspx.cs" Inherits="Nick.Kuang.Web.Member_Ajax" %>
Member_Ajax.aspx cs頁面代碼
protected void Page_Load(object sender, EventArgs e) { Response.Write(GetAll()); } private string GetAll() { List<Student> list = new List<Student>(); for (int i = 0; i < 100; i++) { list.Add(new Student { Id = i, Name = "Name" + i, Age = i }); } int pageIndex = GetPage(); int pageSize = StrToInt(QueryString("pagesize"), 10); ; JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer(); string result = javascriptSerializer.Serialize(list.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList()); string response = "{\"result\" :\"1\"," + "\"returnval\" :\"操作成功\"," + "\"pagebar\" :\"" + PageBar.GetPageBar(3, "js", 2, list.Count, pageSize, pageIndex, "javascript:ajaxList(<#page#>);") + "\"," + "\"" + "totalCountStr" + "\":" + 10 + ",\"" + "table" + "\":" + result + "}"; return response; } private static int GetPage() { int page = StrToInt(QueryString("pageIndex"), 0) < 1 ? 1 : StrToInt(QueryString("pageIndex"), 0); return page; } private static int StrToInt(string value, int defaultValue) { if (IsNumeric(value)) return int.Parse(value); else return defaultValue; } /// <summary> /// 獲取querystring /// </summary> /// <param name="s">參數(shù)名</param> /// <returns>返回值</returns> private static string QueryString(string s) { if (HttpContext.Current.Request.QueryString[s] != null && HttpContext.Current.Request.QueryString[s] != "") { return SafetyQueryS(HttpContext.Current.Request.QueryString[s].ToString()); } return string.Empty; } /// <summary> /// 將字符串中的一些標簽過濾 /// </summary> /// <param name="theString"></param> /// <returns></returns> private static string SafetyQueryS(string theString) { string[] aryReg = { "'", ";", "\"", "\r", "\n", "<", ">" }; for (int i = 0; i < aryReg.Length; i++) { theStringtheString = theString.Replace(aryReg[i], string.Empty); } return theString; } private static bool IsNumeric(string value) { System.Text.RegularExpressions.Regex myRegex = new System.Text.RegularExpressions.Regex("^[-]?[1-9]*[0-9]*$"); if (value.Length == 0) { return false; } return myRegex.IsMatch(value); }使用JavaScriptSerializer中的Serialize方法可以將Object類型數(shù)據(jù)轉(zhuǎn)換成JSON格式的數(shù)據(jù)，告別以前拼接成字串的方法
Student實體類代碼屬性
public class Student { public int Id { get; set; } public string Name { get; set; } public int Age { get; set; } }分頁中用到的PageBar類代碼，分頁調(diào)用Default.aspx中ajaxList函數(shù)，實現(xiàn)無刷新分頁
public class PageBar { /// <summary> /// 完整模式：數(shù)字+上下頁+首末+總記錄信息+指定頁碼翻轉(zhuǎn) /// </summary> /// <param name="stype"></param> /// <param name="stepNum"></param> /// <param name="pageRoot"></param> /// <param name="pageFoot"></param> /// <param name="countNum"></param> /// <param name="currentPage"></param> /// <param name="Http1"></param> /// <param name="HttpM"></param> /// <param name="HttpN"></param> /// <param name="limitPage"></param> /// <returns></returns> private static string GetDetailbar(string stype, int stepNum, int pageRoot, int pageFoot, int pageCount, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage) { StringBuilder sb = new StringBuilder(); sb.Append("<div class='p_btns'>"); //sb.Append("<span class='total_count'>共" + countNum.ToString() + "條，當前第" + currentPage.ToString() + "/" + pageCount.ToString() + "頁 </span>"); sb.Append("<span class='total_count'>共" + countNum.ToString() + "條記錄/" + pageCount.ToString() + "頁 </span>"); if (countNum > pageSize) { if (currentPage != 1)//只要不是***頁 sb.Append("<a target='_self' href='" + GetPageUrl(currentPage - 1, Http1, HttpM, HttpN, limitPage) + "' title='上一頁'>«</a>"); if (pageRoot > 1) { sb.Append("<a target='_self' href='" + GetPageUrl(1, Http1, HttpM, HttpN, limitPage) + "'>1..</a>"); } if (stepNum > 0) { for (int i = pageRoot; i <= pageFoot; i++) { if (i == currentPage) sb.Append("<span class='currentpage'>" + i.ToString() + "</span>"); else sb.Append("<a target='_self' href='" + GetPageUrl(i, Http1, HttpM, HttpN, limitPage) + "'>" + i.ToString() + "</a>"); if (i == pageCount) break; } } if (pageFoot < pageCount) { sb.Append("<a target='_self' href='" + GetPageUrl(pageCount, Http1, HttpM, HttpN, limitPage) + "'>.." + pageCount + "</a>"); } if (currentPage != pageCount)//只要不是***一頁 sb.Append("<a target='_self' href='" + GetPageUrl(currentPage + 1, Http1, HttpM, HttpN, limitPage) + "' title='下一頁'>»</a>"); if (stype == "html") sb.Append("<span class='jumppage'>轉(zhuǎn)到第 <input type='text' name='custompage' size='2' onkeyup=\"this.value=this.value.replace(/\\D/g,'')\" onafterpaste=\"this.value=this.value.replace(/\\D/g,'')\" onkeydown=\"if(event.keyCode==13) {window.location='" + HttpN + "'.replace('<#page#>',this.value); return false;}\" /> 頁</span>"); } sb.Append("</div>"); return sb.ToString(); } /// <summary> /// 分頁導航 /// </summary> /// <param name="mode">支持1=simple,2=normal,3=full</param> /// <param name="stype">html/js,只有當stype為html且mode為3的時候顯示任意頁的轉(zhuǎn)向</param> /// <param name="stepNum">步數(shù),如果步數(shù)為i，則每頁的數(shù)字導航就有2i+1</param> /// <param name="countNum">記錄總數(shù)</param> /// <param name="pageSize">每頁記錄數(shù)</param> /// <param name="currentPage">當前頁碼</param> /// <param name="Http1">第1頁的鏈接地址模板，支持js</param> /// <param name="HttpM">第M頁的鏈接地址模板，支持js,M不大于limitPage</param> /// <param name="HttpN">第N頁的鏈接地址模板，支持js,N大于limitPage</param> /// <param name="limitPage"></param> /// <returns></returns> public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage) { string pagebar = ""; //if (countNum > pageSize) //{ int pageCount = countNum % pageSize == 0 ? countNum / pageSize : countNum / pageSize + 1; currentPage = currentPage > pageCount ? pageCount : currentPage; currentPage = currentPage < 1 ? 1 : currentPage; int stepageSize = stepNum * 2; int pageRoot = 1; int pageFoot = pageCount; pageCount = pageCount == 0 ? 1 : pageCount; if (pageCount - stepageSize < 1)//頁數(shù)比較少 { pageRoot = 1; pageFoot = pageCount; } else { pageRoot = currentPage - stepNum > 1 ? currentPage - stepNum : 1; pageFoot = pageRoot + stepageSize > pageCount ? pageCount : pageRoot + stepageSize; pageRoot = pageFoot - stepageSize < pageRoot ? pageFoot - stepageSize : pageRoot; } pagebar = GetDetailbar(stype, stepNum, pageRoot, pageFoot, pageCount, countNum, pageSize, currentPage, Http1, HttpM, HttpN, limitPage); return pagebar; } public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string HttpN) { return GetPageBar(mode, stype, stepNum, countNum, pageSize, currentPage, HttpN, HttpN, HttpN, 0); } public static string GetPageUrl(int chkPage, string Http1, string HttpM, string HttpN, int limitPage) { string Http = string.Empty; if (chkPage == 1) Http = Http1; else Http = (chkPage > limitPage || limitPage == 0) ? HttpN : HttpM; return Http.Replace("<#page#>", chkPage.ToString()); } }關于JQuery中怎么實現(xiàn)一個分頁程序就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
當前題目：JQuery中怎么實現(xiàn)一個分頁程序
文章分享：http://www.rwnh.cn/article6/jispig.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、App設計、營銷型網(wǎng)站建設、品牌網(wǎng)站設計、軟件開發(fā)、網(wǎng)站導航
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 【成都網(wǎng)站建設】自適應網(wǎng)站和響應式網(wǎng)站之間的區(qū)別？ 2013-07-27
- 創(chuàng)新互聯(lián)小編淺談自適應網(wǎng)站設計的幾點要素 2021-04-28
- 自適應網(wǎng)站與響應式網(wǎng)站建設的區(qū)別是什么？ 2016-08-23
- 自適應網(wǎng)站和響應式網(wǎng)站有哪些區(qū)別以及優(yōu)劣勢分析 2022-04-16
- 企業(yè)搭建網(wǎng)站時，應該選擇響應式網(wǎng)站還是自適應網(wǎng)站呢？ 2021-02-25
- 企業(yè)建站是否應該選擇自適應網(wǎng)站設計？ 2022-05-10
- html5自適應網(wǎng)站的基本含義 2021-02-13
- 上海自適應網(wǎng)站建設要注意什么？ 2020-12-28
- 自適應網(wǎng)站建設-自適應網(wǎng)頁制作容易碰到的問題 2016-11-10
- 自適應網(wǎng)站開發(fā)都有哪些優(yōu)勢？ 2016-11-12
- Dexiang Medicine H5自適應網(wǎng)站制作完成 2022-09-22
- 自適應網(wǎng)站與響應式網(wǎng)站建設的區(qū)別是什么 2021-09-23