javascript处理数据分页参数

最新推荐文章于 2023-03-26 17:33:02 发布

最新推荐文章于 2023-03-26 17:33:02 发布 · 200 阅读

文章标签：

#JavaScript #Ajax #HTML #ViewUI

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的数据分页插件，该插件能够根据用户操作（如点击首页、上一页、下一页和尾页按钮）更新当前页码和数据库起始行号，并通过AJAX获取相应数据。代码示例展示了如何初始化分页状态并定义翻页操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用javascript处理数据分页前的参数处理，在通过ajax提取相应的数据，代码如下（javascript部分代码）：

<html>
<head>
  <title></title>
 <script>
   var currentPage =1 ; //当前页码
   var totalRows = 20 ;//数据库中总行数
   var pageSize = 5 ;//规定每页显示行数
   var totalPages = totalRows/pageSize ; //总页数
   var startRow =0; //数据库起始行
     if((totalRows%pageSize)>0){
	    totalPages++ ;
	 }
   
  
    var html = "<input type='button' value='首页' onclick=doclick('first')>";
	  html+="<input type='button' value='下一页' onclick=doclick('next')>";
	  html+="<input type='button' value='上一页' onclick=doclick('previous')>";
	  html+="<input type='button' value='最后一页' onclick=doclick('last')>" ;

   function doclick(method){
     if(method=="first")
	 {
	     currentPage = 1;
		 startRow = 0 ;
         alert("currentPage="+currentPage+"  startRow="+startRow)
	 }else if(method=="next"){
	      if (currentPage == totalPages) {
             return false ;
           }
		 currentPage++;
		 startRow = (currentPage-1)*pageSize ;
	     alert("currentPage="+currentPage+"  startRow="+startRow)
	 }else if(method=="previous"){
	     if(currentPage == 1){
		   return false ;
		 }
		 currentPage--;
		 startRow = (currentPage-1)*pageSize ;
	     alert("currentPage="+currentPage+"  startRow="+startRow)
	 }else if(method=="last"){
	     currentPage = totalPages ;
		 startRow = (currentPage-1)*pageSize ;
	     alert("currentPage="+currentPage+"  startRow="+startRow)
	 }
      document.getElementById('a').innerHTML =html ;
	 }

   function create(){
     
      document.getElementById('a').innerHTML =html ;
   }
 </script>
</head>
<body onload="create();">
  <span id='a'></span>
</body>
</html>