Asp.Net之JS產生分頁條的方法_javascript技巧

Default.aspx.cs中的代碼

protected int pageIndex = 1;protected int pageSize = 10;protected int pageCount = 100;protected string name = string.Empty;protected void Page_Load(object sender, EventArgs e){ int.TryParse(Request.QueryString["pageIndex"],out pageIndex); name=Request.QueryString["name"];} 

Default.aspx.cs中的代碼

Body中的內容

名稱:<input type="text" id="txtName" value="<%=name %>" />  <div id="PageBar">

JS中的內容

<script src="jquery-1.4.1.js" type="text/javascript"></script>  <script type="text/javascript">  var pagecount=<%=pageCount %>;  var pageindex=<%=pageIndex %>;  var pageSize=<%=pageSize %>;  $(function(){    createPageBar(pageindex,pagecount);  })  //產生分頁條  function createPageBar(pageindex,pageCount){   //拿到存放分頁條的div並清空   var pageBarObj=$('#PageBar');   pageBarObj.html('');         //判斷給定頁碼   if(pageindex<1){     pageindex=1;   }   if(pageindex>pageCount){     pageindex=pagecount;   }   //首頁與上一頁   $('<a href="javaScript:void(0)">首頁</a> ').appendTo(pageBarObj).click(function(){     goPage(1);   });   if(pageindex>1){     $('<a href="javaScript:void(0)">上一頁</a> ').appendTo(pageBarObj).click(function(){      goPage(pageindex-1);     });   }      //數字分頁   var start=pageindex-4;   if(start<1){     start=1;   }   var end=start+9;   if(end>pagecount){     end=pagecount;   }   for(var i=start;i<=end;i++){    $(' <a href="javascript:void(0)">['+i+']</a> ').appendTo(pageBarObj).click(function(){     goPage(i);    });   }   //下一頁與尾頁   if(pageindex<pagecount){    $('<a href="javaScript:void(0)">下一頁</a> ').appendTo(pageBarObj).click(function(){      goPage(pageindex+1);     });   }   $('<a href="javaScript:void(0)">尾頁</a>').appendTo(pageBarObj).click(function(){     goPage(pagecount);   });  }  //去跳轉  function goPage(pageindex){    var name=$('#txtName').val();    window.location="/Default.aspx?pageindex="+pageindex+"&name="+name;  }  </script>

以上這篇Asp.Net之JS產生分頁條的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。