1.先写好html基础样式

我懒得去写css样式233,能看就行

    <style>
#page {
width: 20px;
}
</style>
<table>
<tr>
<th>id</th>
<th>name</th>
<th>pwd</th>
<th>age</th>
</tr>
<tbody id="res"> </tbody>
</table>
<button id="up_btn">上一页</button>
<span><input type="text" id="page"><span id="pages"></span></span>
<button id="down_btn">下一页</button>

2.编写servlet

  • 2.1 先写查询数据库总条数的servlet LoadServlet

        //WorkerDaoImpl是我自己写的数据库操作类
WorkDaoImpl workDao=new WorkDaoImpl();
int count =0;
try {
//查询总条数
count = workDao.queueCountWorker();
} catch (Exception e) {
e.printStackTrace();
}
//传输类型为json,编码为utf-8
response.setContentType("application/json;charset=utf-8");
//Java对象转换JSON,导入的是Jackson的包
ObjectMapper mapper=new ObjectMapper();
Map<String,Object> map=new HashMap<>();
map.put("count",count);
mapper.writeValue(response.getWriter(),map);
//将总条数写入ServletContext域,避免多次查询浪费资源
ServletContext sc = this.getServletContext();
sc.setAttribute("count",count);
  • 2.2 编写查询数据的servlet QueueAllWorkersServlet

       //获取前端传来的页码数
int page = Integer.parseInt(request.getParameter("page"));
//从ServletContext中获取总条数
ServletContext sc = this.getServletContext();
int count = (Integer) sc.getAttribute("count"); List<Worker> workers = null;
WorkDaoImpl workDao = new WorkDaoImpl();
try {
//当页码小于1,显示第一页的数据
if (page<1){
workers = workDao.queueAllWorker(0, 5);
//当页码大于最大页数,显示最大页数的数据
}else if (page>Math.ceil(((double)count)/5)){
workers = workDao.queueAllWorker((int)Math.ceil(((double)count)/5)-1, 5);
}else {
workers = workDao.queueAllWorker((page - 1) * 5, 5);
}
} catch (Exception e) {
e.printStackTrace();
}
//数据类型为json,字符集为utf-8
response.setContentType("application/json;charset=utf-8");
//数据传出
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(response.getWriter(), workers);
  • 2.3 补充:JSON数据和Java对象的相互转换

    • JSON解析器:
    • 常见的解析器:Jsonlib,Gson,fastjson,jackson
    • 1.JSON转为Java对象
        1. 导入jackson的相关jar包
      2. 创建Jackson核心对象 ObjectMapper
      3. 调用ObjectMapper的相关方法进行转换
      1. readValue(json字符串数据,Class)
    • 2. Java对象转换JSON
        1. 使用步骤:
      1. 导入jackson的相关jar包
      2. 创建Jackson核心对象 ObjectMapper
      3. 调用ObjectMapper的相关方法进行转换
      1. 转换方法:
      * writeValue(参数1,obj):
      参数1:
      File:将obj对象转换为JSON字符串,并保存到指定的文件中
      Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
      OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
      * writeValueAsString(obj):将对象转为json字符串 2. 注解:
      1. @JsonIgnore:排除属性。
      2. @JsonFormat:属性值得格式化
      * @JsonFormat(pattern = "yyyy-MM-dd") 3. 复杂java对象转换
      1. List:数组
      2. Map:对象格式一致

3.ajax编写

  • 3.1 源码

        $(function () {
var page = 1;
var pages = 1;
;
$("#page").val(page); //查询方法
function ser() {
$.post("QueryAllWorkers2Servlet", {page: page}, function (data) {
//拼接字符串最后写入到res中
var str = "";
//遍历data数组
for (var i = 0; i < data.length; i++) {
//获取data当前的json
var user = data[i];
str += "<tr>";
//遍历json
for (var key in user) {
str = str + "<td>" + user[key] + "</td>"; }
str = str + "</tr>";
}
$("#res").html(str);
});
} //刷新后自动获取最大页码
function load() {
$.post("LoadServlet", null, function (data) {
pages = Math.ceil(data["count"] / 5);
$("#pages").text("/" + pages);
})
} load();
ser();
//下一页点击事件
$("#down_btn").click(function () {
page = page + 1;
//检验
if (page > pages) {
page = pages;
}
//将page中的值改为修改后的页码
$("#page").val(page);
ser(); });
//上一页点击事件
$("#up_btn").click(function () {
page = page - 1;
//检验
if (page < 1) {
page = 1;
}
//修改
$("#page").val(page);
ser(); });
//page输入框失去焦点事件
$("#page").blur(function () {
page = parseInt($("#page").val());
//校验,若输入的值大于最大页码数,则将页码变为最大页码数
if (page > pages) {
page = pages;
//校验,若输入的值小于1,则将页码变为1
} else if (page < 1) {
page = 1;
}
$("#page").val(page);
ser();
}); });
  • 3.2 补充 ajax参数

      	1. $.ajax()
    * 语法:$.ajax({键值对});
    //使用$.ajax()发送异步请求
    $.ajax({
    url:"ajaxServlet1111" , // 请求路径
    type:"POST" , //请求方式
    //data: "username=jack&age=23",//请求参数
    data:{"username":"jack","age":23},
    success:function (data) {
    alert(data);
    },//响应成功后的回调函数
    error:function () {
    alert("出错啦...")
    },//表示如果请求响应出现错误,会执行的回调函数 dataType:"text"//设置接受到的响应数据的格式
    });
    2. $.get():发送get请求
    * 语法:$.get(url, [data], [callback], [type])
    * 参数:
    * url:请求路径
    * data:请求参数
    * callback:回调函数
    * type:响应结果的类型 3. $.post():发送post请求
    * 语法:$.post(url, [data], [callback], [type])
    * 参数:
    * url:请求路径
    * data:请求参数
    * callback:回调函数
    * type:响应结果的类型

java,jq,ajax写分页的更多相关文章

  1. Ajax写分页查询(实现不刷新页面)

    获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表 ...

  2. 用ajax写分页查询-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  3. 如何用ajax写分页查询(以留言信息为例)-----2017-05-17

    要写分页,首先你得清楚,一页你想显示多少条信息?如何计算总共显示的页数? 先说一下思路: (1)从数据库读取数据,以chenai表为例,读取所有留言信息.并能够实现输入发送者,可以查询该发送者的留言总 ...

  4. 5.Hibernate实现全套增删改查和ajax异步分页

    1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...

  5. pagebean pagetag java 后台代码实现分页 demo 前台标签分页 后台java分页

    java 后台代码实现分页 demo 实力 自己写的 标签分页 package com.cszoc.sockstore.util; import java.util.HashMap;import ja ...

  6. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  7. Ajax做分页

    Ajax做分页 用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. .设置分页显示显示的样式,显示效果如下. 复制代码 <style type=" ...

  8. Yii 框架ajax搜索分页

    要想实现ajax搜索分页 其实很简单 第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层

  9. ajax实现分页和分页查询

    之前有写过ajax的加载页面,是非常简单的,而且不需要重新刷新页面,写起来也是非常的方便,今天写的分页是不用封装page.class.php的, 是单纯的js和ajax写出来的  首先为了页面的整齐与 ...

随机推荐

  1. 7/8段码管(LED)

    LED显示器在许多的数字系统中作为显示输出设备,使用非常广泛.它的结构是由发光二极管构成的a.b.c.d.e.f和g七段,并由此得名,实际上每个LED还有一个发光段dp,一般用于表示小数点,所以也有少 ...

  2. 小白自学机器学习----3.令人头秃的pytorch安装 (No module named 'tools.nnwrap' 错误)

    tensorflow 刚刚会写基础的模块了,今天找到研究方向的代码是pytorch实现的 总是看到这句话,人生苦短,我用pytorch 看来pytorch应该比tensorflow好学,但是!! py ...

  3. FC及BFC

    1.什么是FC 2.BFC块级格式化上下文(Block formatting context) Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类 ...

  4. centos7搭建ceph集群

    一.服务器规划 主机名 主机IP 磁盘配比 角色 node1 public-ip:10.0.0.130cluster-ip:192.168.2.130 sda,sdb,sdcsda是系统盘,另外两块数 ...

  5. frida报错frida.InvalidArgumentError: device not found问题解决方案

    一.问题描述     python安装好frida框架后,在安卓端启动了frida-server,启动要hook的应用,在cmd中执行python脚本,报错frida.InvalidArgumentE ...

  6. 01 搭建EasyMock环境

    EasyMock 介绍 EasyMock是一个构建模拟数据的平台,也可以说是一个在线mockJs平台 EasyMock优势 省去配置.安装mockJs步骤,解决多人协作Mock数据不互通问题 不需要在 ...

  7. Redis 中的客户端

    Redis 是一个客户端服务端的程序,服务端提供数据存储等等服务,客户端连接服务端并通过向服务端发送命令,读取或写入数据,简单来说,客户端就是某种工具,我们通过它与 Redis 服务端进行通讯并完成数 ...

  8. 上线前测试的bug,要不要处理,跟版本的关系

    最近有两个项目是在旧版本上实施的.上线前经过一轮测试后,发现了一些产品(我们的产品确实不稳定) 在这个项目上,修改产品bug是肯定的.但是要不要追踪这些bug? 这就跟版本使用范围有关系了,毕竟要考虑 ...

  9. 【09】openlayers 图片图层

    效果:  创建地图: var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection:'EPSG:4326',//投影方式 cent ...

  10. R自带数据集

    向量 euro    #欧元汇率,长度为11,每个元素都有命名landmasses    #48个陆地的面积,每个都有命名precip   #长度为70的命名向量rivers   #北美141条河流长 ...