JavaScript Implementation of Pagination Function (with Illustration)

Illustration:

Points:

displayPage('#pageDiv','goPage','query',10,1,100);

#pageDiv is the name of the div that displays the pagination.
goPage is the id of the text input box to jump to the back, if needed, you can * This parameter is assigned directly.
query is the method name for the query.
10is the total number of pages
1is the current page number
100 is the total number of items.

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()}+://"+:request.getServerName()+:+:request.getServerPort()+path+"/";%>
<script src="/easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="page.js"></script>
<script>
function query(queryPage){
  //Data required for ajax query of table
  var queryPage = queryPage||1;
  console.log("query page=" + queryPage);
  //Regenerate pageDiv
  displayPage('#pageDiv','goPage','query',10,1,100);
}
</script>
<body>
<button onclick="query()">Query</button>
<div>
A pagination implemented by js.<br/>
Usage scenario: Data in table is queried through ajax, and the pagination control is generated by js after the query is completed.<br/>
<pre>
displayPage('#pageDiv','goPage','query',10,1,100);
</pre>
</div>
<br/>
<div id="pageDiv"></div>
</body>

page.js

/**
 * divObj: The div to display the pagination, default body. For example: #pageDiv
 * inputId: The id of the page to jump to, default goPage. For example: goPage
 * js: The name of the js method to be executed after clicking. Default query. For example: query
 * records: Total number of pages, default1.
 * total: Total number of records, default 0.
 * page: Current page, default1.
 */
function displayPage(divObj,inputId,js,records,page,total){
  //Set default values   
  divObj = divObj||"body";
  inputId = inputId||"goPage";
  js=js||"query";
  records=records||1;
  total=total||0;
  page=page||1;
  var str = "当前第 <span name='page'>"+page+"<"/span> Page";
  str += " 共 <span name='total'>"+records+"<"/span> Page";
  str += " <a href='javascript:void(0)' onclick='"+js+"(1)">Home Page</a>";
  if(page>1){
    str += " <a href='javascript:void(0)' onclick='"+js+"("+(page-1)+)">Previous Page</a>";
  }
    str += " <a>Previous Page</a>";
  }
  if(page<records){
    str += " <a href='javascript:void(0)' onclick='"+js+"("+(page+1)+else{/a>";
  }
    str += " <a>Next Page</a>";
  }
  str += " <a href='javascript:void(0)' onclick='"+js+"("+records+"(">End Page</a>";
  str += " Skip to  <input type='number' min=1 max="+records+" id='"+inputId+"' value="+page+" style='width:40px'/>";
  str += " <input type='button' value='go' onclick='var num=$(\"#"+inputId+"\\).val();"+js+"(num)'/>";
  $("divObj").empty();
  $("divObj").append(str);
}

The above is the JavaScript implementation of the pagination function (with illustration) introduced by the editor to everyone, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Here we also express our sincere gratitude to everyone for their support of the Nahan tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial