SoFunction
Updated on 2025-03-10

How to generate paging bars by JS

Code in

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

Code in

Content in Body

name:<input type="text"  value="<%=name %>" />
  <div >

Content in JS

<script src="jquery-1.4." type="text/javascript"></script>
  <script type="text/javascript">
  var pagecount=<%=pageCount %>;
  var pageindex=<%=pageIndex %>;
  var pageSize=<%=pageSize %>;
  $(function(){
    createPageBar(pageindex,pagecount);
  })

  //Generate paging bar  function createPageBar(pageindex,pageCount){
   //Get the div to store the paging bar and clear it   var pageBarObj=$('#PageBar');
   ('');
   
   
   //Judge the given page number   if(pageindex<1){
     pageindex=1;
   }
   if(pageindex>pageCount){
     pageindex=pagecount;
   }

   //Home and previous page   $('<a href="javaScript:void(0)">front page</a> ').appendTo(pageBarObj).click(function(){
     goPage(1);
   });

   if(pageindex>1){
     $('<a href="javaScript:void(0)">Previous page</a> ').appendTo(pageBarObj).click(function(){
      goPage(pageindex-1);
     });
   }
   

   //Digital pagination   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);
    });
   }


   //Next and last page   if(pageindex<pagecount){
    $('<a href="javaScript:void(0)">Next page</a> ').appendTo(pageBarObj).click(function(){
      goPage(pageindex+1);
     });
   }
   $('<a href="javaScript:void(0)">Last page</a>').appendTo(pageBarObj).click(function(){
     goPage(pagecount);
   });

  }

  //Go and jump  function goPage(pageindex){
    var name=$('#txtName').val();
    ="/?pageindex="+pageindex+"&name="+name;
  }
  </script>

The above method of generating paging stickers in JS is all the content I share with you. I hope you can give you a reference and I hope you can support me more.