Ajax实现从数据库读取数据后，实现分页

最新推荐文章于 2024-07-30 16:51:22 发布
最新推荐文章于 2024-07-30 16:51:22 发布
阅读量3k 收藏 2
点赞数
分类专栏： Ajax 文章标签： ajax 数据库 xmlhttprequest function input stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallsundoudou/article/details/7298558
版权
 

Ajax实现从数据库读取数据后，实现分页的操作：
1、 分页效果如图所示：
 


首先写一个分页的类。 Page.java
在里面封装 了总页数，当前页，总记录数。
2、 在servlet把获取的当前页信息传递过去。
  Page page = new Page("Employee", nowPage);
  List<Employee> emps = page.getDatas();
3、 在servlet中：
//在emps跟标签中就把 当前页   总记录数  总页数  传递过去了
 out.println("<emps nowPage='"+page.getNowPage()+"' countSize='"+page.getCountSize()+"' countPage='"+page.getCountPage()+"'>");
4、 在index.jsp源码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>My JSP 'index.jsp' starting page</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
 </head>

 <body>
  <div align="center">
   <div>
    <h1>
     员工界面
    </h1>
    <input type="button" value="查询员工" id="btn" />

    <div id="showEmps">
     <table border="1" cellpadding="0" cellspacing="0">
      <thead>
       <tr>
        <th>
         序号
        </th>
           
                          </th>  
        <th>
         姓名
        </th>
        <th>
         性别
        </th>
        <th>
         年龄
        </th>
        <th>
         出生日期
        </th>
        <th>
         薪资
        </th>
        <th width="150px"> 
         <font size="2px" color="black">删除所有项  <input type="checkbox" id="chk" /></font>
         <input type="button" value="删除所选项" id="delBtn" />
         
        </th>
       </tr>
       
      </thead>
      <tbody id="emps"></tbody>
     </table>
     <div id="pages"></div>
    </div>
   </div>
  </div>
 </body>
</html>
<script type="text/javascript">
<!--

   //窗体加载完毕后  触发该函数
   window.onload = function(){
   
     //当点击删除操作的时候
     var delHtmlBtn = getNode("delBtn");
     //注册事件
     delHtmlBtn.onclick = function(){
    
        var ids="";
        var delchksNode =  document.getElementsByName("delchk");
          for(var i=0;i<delchksNode.length;i++){
              if(delchksNode[i].checked){
                 ids+=delchksNode[i].value+",";
              }
         }
           //第一步：创建xmlHttpRequest对象
           var xmlHttp = createXMLHttpRequest();
           
    //清空
    clearNodes(empsHtmlNode);     
               
      xmlHttp.onreadystatechange =  function (){
        if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                //获取 xmlDocument
                var xmlDoc = xmlHttp.responseXML;
                //获取跟标签
                var rootNode = xmlDoc.documentElement;
                //获取 xml文件中 emp 的所有的元素节点
                var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"
                //获取 emp 节点里边所有的孩子节点
                for(var i=0;i<emps.length;i++){
                //得到一个具体的emp：
                var empNode = emps[i];
                //为emp创建一行 
                var tr = document.createElement("tr");
                //创建序号的 td
                var td1 = document.createElement("td");
                td1.appendChild(document.createTextNode(emps[i].getAttribute("id")));
                tr.appendChild(td1);
                
                var elementNodes = empNode.childNodes; //name ,sex ,age
                for(var j=0;j<elementNodes.length;j++){
                   
                   //节点是否是元素节点 
                   if(elementNodes[j].nodeType==1){
                      var td2 = document.createElement("td");
                      td2.appendChild(document.createTextNode(elementNodes[j].firstChild.nodeValue));
                      tr.appendChild(td2);
                   }
                }
                var delchk = document.createElement("input");
                delchk.setAttribute("type","checkbox");
                delchk.setAttribute("name","delchk");
                delchk.setAttribute("value",emps[i].getAttribute("id"));
                tr.appendChild(delchk);
                empsHtmlNode.appendChild(tr);
                
              }
              
               //调用分页创建分页相关的node节点对象
             pagesNode(pagesHtmlNode,rootNode);
          }
       }
         
     }
            //第二步：规定请求参数
        xmlHttp.open("GET","./servlet/DelEmployeeServlet?ids="+ids+"&timeStamp="+new Date().getTime(),true);
        //第三步：发送请求
        xmlHttp.send(null);
     }
    
    //实现全选 全部选的效果
     var chksHtmlNode = getNode("chk");
     
     //注册的事件
     chksHtmlNode.onclick = function(){
          var delchksNode =  document.getElementsByName("delchk");
          if(chksHtmlNode.checked){
             for(var i=0;i<delchksNode.length;i++){
               delchksNode[i].checked="checked";
             }
          }else{
           for(var i=0;i<delchksNode.length;i++){
               delchksNode[i].checked=null;
             }
          }
     }
    
     var pagesHtmlNode = getNode("pages");
     var empsHtmlNode = getNode("emps");
    
      //从服务器端 传递过了xml数据  在这里解析
      //第一步：创建xmlHttpRequest对象
      var xmlHttp = createXMLHttpRequest();
      var btnNode = getNode("btn");
     
    btnNode.onclick = function(){
          //清空
    clearNodes(empsHtmlNode);     
               
      xmlHttp.onreadystatechange =  function (){
        if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                //获取 xmlDocument
                var xmlDoc = xmlHttp.responseXML;
                //获取跟标签
                var rootNode = xmlDoc.documentElement;
                //获取 xml文件中 emp 的所有的元素节点
                var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"
                //获取 emp 节点里边所有的孩子节点
                for(var i=0;i<emps.length;i++){
                //得到一个具体的emp：
                var empNode = emps[i];
                //为emp创建一行 
                var tr = document.createElement("tr");
                //创建序号的 td
                var td1 = document.createElement("td");
                td1.appendChild(document.createTextNode(emps[i].getAttribute("id")));
                tr.appendChild(td1);
                
                var elementNodes = empNode.childNodes; //name ,sex ,age
                for(var j=0;j<elementNodes.length;j++){
                   
                   //节点是否是元素节点 
                   if(elementNodes[j].nodeType==1){
                      var td2 = document.createElement("td");
                      td2.appendChild(document.createTextNode(elementNodes[j].firstChild.nodeValue));
                      tr.appendChild(td2);
                   }
                }
                
                var delchk = document.createElement("input");
                delchk.setAttribute("type","checkbox");
                delchk.setAttribute("name","delchk");
                delchk.setAttribute("value",emps[i].getAttribute("id"));
                tr.appendChild(delchk);
                empsHtmlNode.appendChild(tr);
                
              }
              
               //调用分页创建分页相关的node节点对象
             pagesNode(pagesHtmlNode,rootNode);
          }
       }
         
     }
 
      //第二步：规定请求参数
      xmlHttp.open("GET","./servlet/EmployeeServlet?timeStamp="+new Date().getTime(),true);
      //第三步：发送请求
      xmlHttp.send(null);
     
     }
   }
     
   
   //添加分页实现的节点
   function pagesNode(pagesHtmlNode,rootNode){
            //获取当前页
            var nowPage =  rootNode.getAttribute("nowPage");
            //获取总页数
            var countPage =  rootNode.getAttribute("countPage");
            //获取总记录数
            var countSize =  rootNode.getAttribute("countSize");
   
            var MsgNode = document.createTextNode("当前是"+nowPage+"页,总共"+countPage+"页,共"+countSize+"记录");
           //清空方法
              clearNodes(pagesHtmlNode);
              var firstPage = document.createElement("a");
              firstPage.setAttribute("href","#");
              firstPage.appendChild(document.createTextNode("首页"));
              
              firstPage.onclick = function(){
                    nowPage = 1;
                    //查询 当前页信息
                     getPagesInfo(nowPage)
              }
              
              pagesHtmlNode.appendChild(firstPage);
                
              var backPage = document.createElement("a");
              backPage.setAttribute("href","#");
              backPage.appendChild(document.createTextNode("上一页"));
              
              backPage.onclick = function(){
                   nowPage = eval(nowPage+"-"+1);
                   if(nowPage<=1){
                     nowPage=1;
                   }
                   
                  // //查询 当前页信息
                   getPagesInfo(nowPage)
              }
              
              pagesHtmlNode.appendChild(backPage);
                
              var nextPage = document.createElement("a");
              nextPage.setAttribute("href","#");
              nextPage.appendChild(document.createTextNode("下一页"));
              
              nextPage.onclick = function(){
            
                  nowPage=eval(nowPage+"+"+1);
              
                  if(nowPage>=countPage){
                      nowPage=countPage;
                  }
         
                   //查询 当前页信息
                    getPagesInfo(nowPage)
              }
              
              pagesHtmlNode.appendChild(nextPage);
                
              var lastPage = document.createElement("a");
              lastPage.setAttribute("href","#");
              lastPage.appendChild(document.createTextNode("末页"));
              
              lastPage.onclick = function(){
                   nowPage = countPage;
                    //查询 当前页信息
                  getPagesInfo(nowPage)
              }
              
              pagesHtmlNode.appendChild(lastPage);
              
              pagesHtmlNode.appendChild(MsgNode);
   }
   
   
   //清空操作
   function clearNodes(node){
      var lens = node.childNodes.length;
      for(var i=0;i<lens;i++){
         node.removeChild(node.childNodes[0]);
      }
   }
   function getNode(id){
      return document.getElementById(id);
   }
        
   //创建xmlHttpRequest对象
    //ajax  XMLHttpRequest对象
    function createXMLHttpRequest(){
         var xmlHttp;
         try{
           //firefox opera 等 非 IE的浏览器中
            xmlHttp= new XMLHttpRequest();
         }catch(ex){
             try{
               //IE浏览器
               xmlHttp = new ActiveXObject("MSXML2.XMLHTTP"); 
             }catch(e){
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
         }
         return xmlHttp;
    }
    
  //分页代码
  function getPagesInfo(nowPage){
    
      //修改chksHtmlNode 为 默认值
      var chksHtmlNode = getNode("chk");
      chksHtmlNode.checked=null;
      
       var pagesHtmlNode = getNode("pages");
       var empsHtmlNode = getNode("emps");


    
      //从服务器端 传递过了xml数据  在这里解析
      //第一步：创建xmlHttpRequest对象
      var xmlHttp = createXMLHttpRequest();
  
          //清空
    clearNodes(empsHtmlNode);     
               
      xmlHttp.onreadystatechange =  function (){
        if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                //获取 xmlDocument
                var xmlDoc = xmlHttp.responseXML;
                //获取跟标签
                var rootNode = xmlDoc.documentElement;
                //获取 xml文件中 emp 的所有的元素节点
                var emps = xmlDoc.getElementsByTagName("emp"); //emp id="xxx"
                //获取 emp 节点里边所有的孩子节点
                for(var i=0;i<emps.length;i++){
                //得到一个具体的emp：
                var empNode = emps[i];
                //为emp创建一行 
                var tr = document.createElement("tr");
                //创建序号的 td
                var td1 = document.createElement("td");
                td1.appendChild(document.createTextNode(emps[i].getAttribute("id")));
                tr.appendChild(td1);
                
                var elementNodes = empNode.childNodes; //name ,sex ,age
                for(var j=0;j<elementNodes.length;j++){
                   
                   //节点是否是元素节点 
                   if(elementNodes[j].nodeType==1){
                      var td2 = document.createElement("td");
                      td2.appendChild(document.createTextNode(elementNodes[j].firstChild.nodeValue));
                      tr.appendChild(td2);
                   }
                }
                
                
                var delchk = document.createElement("input");
                delchk.setAttribute("type","checkbox");
                delchk.setAttribute("name","delchk");
                delchk.setAttribute("value",emps[i].getAttribute("id"));
                tr.appendChild(delchk);
                empsHtmlNode.appendChild(tr);
                empsHtmlNode.appendChild(tr);
                
              }
              
             //调用分页创建分页相关的node节点对象
             pagesNode(pagesHtmlNode,rootNode);
          }
       }

  }
       
       
      //第二步：规定请求参数
      xmlHttp.open("GET","./servlet/EmployeeServlet?nowPage="+nowPage+"&timeStamp="+new Date().getTime(),true);
      //第三步：发送请求
      xmlHttp.send(null);
   
   }
   
//-->
</script>

向日葵的眼里只有太阳
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html一次请求数据然后分页,Ajax读取数据之分页显示篇实现代码
weixin_42185419的博客
06-05 526
我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心，然后我们再看实例效果．所谓的ajax分页与传统的数据分页，在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下，将请求的页码，和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据："ajax_page.asp?action=read&pagecount=3 &...
php 分页怎么实现的_php如何实现分页
weixin_32015301的博客
03-08 1432
php实现分页的方法：1、通过sql查询进行分页；2、使用ajax的方法实现分页；3、通过“function viewpage(p){...}”方式实现分页。php分页功能的3种实现方法在php项目中，分页是非常常见的，那么php分页功能该如何实现呢？本文将为大家带来的就是php分页功能的3种实现方法，对分页不太熟的同学们有福利了哦！方法一：将sql查询进行分页进行，需要调用几个函数，具体见下方脚...
ajax实现数据库添加,jquery实现Access数据库添加数据
weixin_36474966的博客
08-05 301
1.编写客户端代码jQueryAjax = function(data, callback, manage) {this.loading();jQuery.ajax({type: "POST",url: "Edit/Editor.aspx",data: data,async: true,success: function(text, state) {if (callback != undefine...
ajax怎么付分页数据,Ajax读取数据之分页显示篇实现代码
weixin_35067976的博客
08-05 478
我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心，然后我们再看实例效果．所谓的ajax分页与传统的数据分页，在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下，将请求的页码，和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据："ajax_page.asp?action=read&pagecount=3 &...
java mysql ajax分页查询数据格式_ssm框架 怎么用ajax查询从数据库读取数据 返回json格式...
weixin_42489252的博客
02-24 102
JsonConfigjsonConfig=newJsonConfig();jsonConfig.registerJsonValueProcessor(java.util.Date.class,newJsonDateValueProcessor());JSONArrayjson=JSONArray.fromObject(list,jsonConfig);ServletActionCo...
jquery ajax数据分页显示,基于Jquery+Ajax+Json实现分页显示
weixin_39864682的博客
08-05 437
1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);int totalRows = blackList.size();StringBuffer sb = new StringBuffer();sb.append("{\"totalCou...
ajax 如何实现分页功能
程序人生
11-07 7358
这里用ajax简单的实现一下分页功能，作为一个例子ajax实现分页，首先需要工具类，Page.java，如下：package com.feelingsys.bean;/** * Page * @author LIU * @version 1.0 2017-09-28 */ public class Page { /** * 总记录数 */ private i
ajax实现多个删除数据,Ajax添加数据与删除篇实现代码
weixin_35822534的博客
08-05 581
一团网资讯一团资讯 > ajax > Ajax添加数据与删除篇实现代码Ajax添加数据与删除篇实现代码2018-01-23 10:48:38 发布者：来源网络怎么样效果是不是很酷？上面的文本框里是前台的html源码．我们先来讲一下我们在前端干了什么．从body标签开始讲起．一段友情提示的文字．告诉你会出现些什么情况！添加数据的文本框和按扭！用来向服务端数据库写入数据内容．一个s...
php ajax 数据分页查询数据,AJAX_Ajax读取数据之分页显示篇实现代码，我觉得还是有必要把我的ajax分 - phpStudy...
weixin_32043813的博客
03-26 140
Ajax读取数据之分页显示篇实现代码我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心，然后我们再看实例效果．所谓的ajax分页与传统的数据分页，在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下，将请求的页码，和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据："ajax_page.asp?action=read...
Ajax读取数据之分页显示篇实现代码共7页.pdf.zip
10-29
本资料"Ajax读取数据之分页显示篇实现代码共7页.pdf.zip"将详细讲解如何通过Ajax来实现在网页中动态加载分页数据。 首先，理解Ajax的核心概念。Ajax并非一种新的编程语言，而是使用现有技术（JavaScript、...
用JQuery,ajax从数据库读取数据.pdf
11-15
在这个例子中，我们看到一个基于jQuery和Ajax的Web应用程序，用于从数据库中读取数据并显示在用户界面上。这个应用程序使用了LigerUI库，一个JavaScript组件集合，提供了诸如表格（ligerGrid）、对话框（ligerDialog...
php+ajax实现无刷新分页的方法
10-25
当用户点击分页按钮时，`dopage`函数会被调用，显示“正在读取数据...”的提示，并通过`send_request`发送AJAX请求到指定的PHP页面。PHP页面（未在此处展示）会根据请求参数，比如当前页码，从数据库中获取对应的...
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
10-19
在PHP环境中，Ajax可以向PHP脚本发送请求，PHP脚本处理这些请求，例如从数据库中检索分页数据，然后将结果返回给前端。 在PHP端，我们通常会使用PDO（PHP Data Objects）扩展来安全地连接和操作数据库。PDO提供了一...
Ajax+Asp源代码]读取数据库内容的表格(没有用框架)第1/2页
12-09
读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不断修正代码. 目前还有一个小问题,如果有朋友有兴趣帮我解决一下在下不胜感激 你翻到最后...
快速入门了解Ajax
音符犹如代码的博客
07-25 871
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
Apollo使用（3）：分布式docker部署
游王子的博客
07-24 725
Apollo 1.7.0版本开始会默认上传Docker镜像到，可以按照如下步骤获取。
图数据库查询与操作指南-以Nebula图数据库为例
DZSpace，专注于计算机科学与技术领域的技术博主，致力于分享实用知识与技巧，帮助读者快速掌握技术要点，共同探索计算机世界的无限可能。欢迎访问DZSpace的博客，一起学习进步！
07-26 368
图数据库查询与操作指南-以Nebula图数据库为例
二进制部署k8s集群之master节点和etcd数据库集群（上）
最新发布
zx52306的博客
07-30 858
【代码】二进制部署k8s集群之master节点和etcd数据库集群（上）
航空管理系统前后端实现与功能详解
Dao层（数据访问对象）是与数据库交互的接口，用于执行SQL语句，实现数据的增删改查。Pojo层（Plain Old Java Object）定义了系统中的实体类，对应数据库中的表结构。MysqlHelper层作为辅助工具，提供数据库连接和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值