jQuery入门(七)jQuery实现按钮分页

一、分页案例分析

功能分析:使用分页插件,实现分页,效果如下图:

二、实现思路和代码

        2.1)页面实现分析

  1.引入分页插件的样式文件和 js 文件。
  2. 定义当前页码和每页显示的条数。(分页必备信息)
  3. 调用查询数据的函数。
  4. 定义请求查询分页数据的函数,发起 AJAX 异步请求。
  5. 为分页按钮区域设置页数参数(总页数和当前页)。(设置分页插件参数,展示分页条)
  6. 为分页按钮绑定单击事件,完成上一页下一页查询功能。(设置分页插件,绑定事件)

页面代码实现:


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>网站首页</title><link rel="stylesheet" href="css/tt.css"><link rel="stylesheet" href="css/simplePagination.css">
</head>
<body>
<div class="top"><span class="top-left">下载APP</span><span class="top-left"> 北京         晴天</span><span class="top-right">更多产品</span>
</div><div class="container"><div class="left"><a><!--<img src="img/logo.png"><br/>--></a><ul><li><a class="channel-item active" href="#"><span>推荐</span></a></li><li><a class="channel-item" href="#"><span>视频</span></a></li><li><a class="channel-item" href="#"><span>热点</span></a></li><li><a class="channel-item" href="#"><span>直播</span></a></li><li><a class="channel-item" href="#"><span>图片</span></a></li><li><a class="channel-item" href="#"><span>娱乐</span></a></li><li><a class="channel-item" href="#"><span>游戏</span></a></li><li><a class="channel-item" href="#"><span>体育</span></a></li></ul></div><div class="center"><ul class="news_list"></ul><div class="content"><div class="pagination-holder clearfix"><div id="light-pagination" class="pagination"></div></div></div></div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.simplePagination.js"></script>
<script>//1.定义当前页码和每页显示的条数 (分页必备信息)let start = 1;let pageSize = 10;//2.调用查询数据的方法queryByPage(start,pageSize);//3.定义请求查询分页数据的函数,发起AJAX异步请求,将数据显示到页面function queryByPage(start,pageSize) {$.ajax({//请求的资源路径url:"newsServlet2",//请求的参数data:{"start":start,"pageSize":pageSize},//请求的方式type:"POST",//响应数据形式dataType:"json",//请求成功后的回调函数success:function (pageInfo) {//将数据显示到页面let titles = "";for(let i = 0; i < pageInfo.list.length; i++) {titles += "<li>\n" +"                <div class=\"title-box\">\n" +"                    <a href=\"#\" class=\"link\">\n" +pageInfo.list[i].title +"                        <hr>\n" +"                    </a>\n" +"                </div>\n" +"            </li>";}$(".news_list").html(titles);//4.为分页按钮区域设置页数参数(总页数和当前页)$("#light-pagination").pagination({pages:pageInfo.pages,currentPage:pageInfo.pageNum});//5.为分页按钮绑定单击事件,完成上一页下一页查询功能(设置分页插件参数,展示分页条)$("#light-pagination .page-link").click(function () {//获取点击按钮的文本内容let page = $(this).html();//如果点击的是Prev,调用查询方法,查询当前页的上一页数据if(page == "Prev") {queryByPage(pageInfo.pageNum - 1,pageSize);}else if (page == "Next") {//如果点击的是Next,调用查询方法,查询当前页的下一页数据(设置分页插件,绑定事件)queryByPage(pageInfo.pageNum + 1,pageSize);} else {//调用查询方法,查询当前页的数据queryByPage(page,pageSize);}});}});}</script>
</html>

        2.2) 服务器实现分析

   1. 获取请求参数。(当前页码和每页条数)
    2. 根据当前页码和每页显示的条数,调用业务层的方法,得到分页 Page 对象
    3. 封装 PageInfo 对象。
    4. 将得到的数据转为 json。
    5. 将数据响应给客户端。

服务器代码实现:

public class NewsServlet2 extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的编码req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");//1.获取请求参数(当前页码和每页条数)String start = req.getParameter("start");String pageSize = req.getParameter("pageSize");//2.根据当前页码和每页显示的条数来调用业务层的查询方法,得到分页Page对象NewsService service = new NewsServiceImpl();Page page = service.pageQuery(Integer.parseInt(start), Integer.parseInt(pageSize));//3.封装PageInfo对象PageInfo<List<News>> info = new PageInfo<>(page);//4.将得到的数据转为JSONString json = new ObjectMapper().writeValueAsString(info);//5.将数据响应给客户端resp.getWriter().write(json);}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req,resp);}
}

成功实现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/53316.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

挂轨巡检机器人在发电厂与煤矿皮带机场景的应用

一、引言 在发电厂和煤矿等重工业领域&#xff0c;皮带机作为关键设备&#xff0c;其运行状态直接关系到生产效率和安全。然而&#xff0c;传统的人工巡检方式不仅效率低下&#xff0c;还存在安全隐患。随着智能巡检技术的不断发展&#xff0c;杭州旗晟智能科技有限公司推出的…

使用mobaxterm连接linux出现连接中断问题

1.问题描述 使用mobaxterm在连接到远程服务器时&#xff0c;如果隔一段时间不进行操作的话&#xff0c;会出现中断连接的现象。 2.解决 为了增强Linux系统的安全性&#xff0c;我们需要在用户输入空闲一段时间后自动断开&#xff0c;这个操作可以由设置TMOUT值来实现。将以下…

HTB-Pennyworth(cve查询 和 exp使用)

前言 各位师傅大家好&#xff0c;我是qmx_07,今天给大家讲解Pennyworth靶场 渗透过程 信息搜集 服务器端口开放了8080http端口 访问网站 服务器使用jenkins cms系统&#xff0c;版本是2.289.1 通过弱口令爆破&#xff0c;账户是root,密码是password 通过命令执行nday 连…

【WPS Excel】复制表格时,提示“图片太大,超过部份将被截去“ 问题

WPS表格 2019版本 升级到 WPS最新版 WPS-支持多人在线协作编辑Word、Excel和PPT文档_WPS官方网站 使用最新版就能够解决这个问题&#xff0c;如果仍旧无法解决可以勾选如下配置 重启Excel解决。 请勾选&#xff1a;文件 - 选项 - 编辑 - 不提示且不压缩文件中的图像

vue 踩坑记录

本地开发没有cookie 解决方案 设置代理&#xff0c;并把changeOrigin设为true proxy的changeOrigin如果设置为false&#xff1a;请求头中host仍然是浏览器发送过来的host&#xff1b; 如果设置成true&#xff1a;发送请求头中host会设置成target。 允许axios请求携带cookie等凭…

自制深度学习推理框架之卷积和池化算子的设计与实现

文章目录 一、池化算子1.1 池化定义1.2 maxpooling实现1.2 1 Forward前向计算1.2.2 GetInstance实例化Layer1.2.3 LayerRegistererWrapper注册算子 二、卷积算子2.1 卷积定义2.2 Im2col优化卷积计算2.3 分组卷积2.4 Im2Col实现2.5 卷积算子实现2.5.1 GEMM实现2.5.2 卷积算子的实…

finalshell 4.5.x在m1mac闪退

使用过程中会出现突然闪退&#xff0c;尤其在定位生产打开一堆窗口的情况下&#xff0c;绝绝子 闪退崩溃日志&#xff1a; Thread 116 Crashed:: Java: pool-4-thread-28 0 libsystem_kernel.dylib 0x18e926600 __pthread_kill 8 1 libsystem_pthread.dyl…

2025届最新:Java SpringBoot搭建大学生竞赛管理系统,一步步实现报名到评审,全程助力校园活动

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

2024 年高教社杯全国大学生数学建模竞赛B题—生产过程中的决策问题(讲解+代码+成品论文助攻)

2024数学建模国赛选题建议团队助攻资料-CSDN博客https://blog.csdn.net/qq_41489047/article/details/141925859本次国赛white学长团队选择的是比较擅长的BC题&#xff0c;选题建议和助攻资料可参见上面这篇博文&#xff0c;本篇博文主要介绍B题—生产过程中的决策问题&#xf…

给大模型加上“记忆”,深入探索 Mem0 项目

背景介绍 在之前的软件应用中&#xff0c;我们总会在应用中保留大量的用户历史操作记录&#xff0c;方便用户下次使用时可以快速查看和复用&#xff0c;甚至基于这些用户记录可以为用户提供个性化的服务。而这些记录往往都保存在传统的结构化或非结构化数据库中。 在大模型的…

electron 客户端 windows linux(麒麟V10)多系统离线打包 最新版 <一>

electron客户端下载、构建、打包在国内网络情况下&#xff0c;绝对不是什么易事。更不要说离线干活&#xff0c;更是难上加难。 这一篇主要讲下windows离线环境下&#xff0c;如何完成electron的下载打包。咱废话不多说&#xff0c;直接上干货。注意&#xff0c;我的大前提是完…

软考真题之软件设计师的程序语言设计题型(上午题)

目录 编程程序和解释程序 相关习题 函数 编译,解释和翻译阶段 符号表 ​编辑 相关习题 ​编辑 词法分析 语法分析 语义分析 目标代码生成 相关习题 中间代码生成 正规式 相关习题 有限自动机 相关习题 上下文无关文法 相关习题 比较偏的真题 编程程序和解…

艾体宝洞察丨透过语义缓存,实现更快、更智能的LLM应用程序

传统的缓存只存储数据而不考虑上下文&#xff0c;语义缓存则不同&#xff0c;它能理解用户查询背后的含义。它使数据访问更快&#xff0c;系统响应更智能&#xff0c;对 GenAI 应用程序至关重要。 什么是语义缓存&#xff1f; 语义缓存解释并存储用户查询的语义&#xff0c;使…

【计算机网络】描述TCP建立连接与断开的过程

一、TCP连接的建立与断开 1、建立连接——三次握手 1、A的TCP向B发出连接请求报文段 其首部中的同步位SYN 1&#xff0c;并选择序号seq x&#xff0c;表明传送数据时的第一个数据字节的序号是 x 2、B的TCP收到连接请求报文段后&#xff0c;如同意&#xff0c;则发回确认。 B …

JavaScript( 简介)

目录 含义 实例 js代码位置 1 外部引入js文件 2 在 HTML 中&#xff0c;JavaScript 代码必须位于 标签之间。 小结 含义 js是一门脚本语言&#xff0c;能够改变HTML内容 实例 getElementById() 是多个 JavaScript HTML 方法之一。 本例使用该方法来“查找” id"d…

Android Launcher3

一、定义与功能 Android Launcher是Android操作系统中的一个重要组件&#xff0c;它负责管理和呈现用户界面&#xff0c;包括桌面、应用程序抽屉和部件。Launcher不仅为用户提供了一个启动应用程序的入口&#xff0c;还允许用户自定义手机的主屏幕、图标、小部件布局以及一些基…

【2024国赛B题】高教杯全国大学生数学建模国赛建模过程+完整代码论文全解全析

你是否在寻找数学建模比赛的突破点&#xff1f;数学建模进阶思路&#xff01; 作为经验丰富的数学建模团队&#xff0c;我们将为你带来2024国赛数学建模竞赛&#xff08;B题&#xff09;的全面解析。这个解决方案包不仅包括完整的代码实现&#xff0c;还有详尽的建模过程和解析…

ARM32开发——DMA内存到内存

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 需求数据交互流程开发流程依赖引入DMA初始DMA传输请求完整代码 关心的内容DMA初始化DMA初始化DMA数据传输请求完整代码 DMA中断开启…

.NET 8月份红队武器库和资源集合

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

MacBook真的不能打游戏吗?Mac打游戏会损坏电脑吗?苹果电脑怎么玩游戏

MacBook从来都是高端的代名词&#xff0c;超强的性能搭配顶尖的系统&#xff0c;不光处理大型文件时举重若轻&#xff0c;长期使用也不会有明显卡顿。但很多人在需要MacBook一流的生产力同时&#xff0c;也希望能在空闲时体验游戏的乐趣。在大多人的印象里&#xff0c;Mac电脑对…