非常不错的一个JS分页效果代码，值得研究

最新推荐文章于 2024-03-19 05:05:30 发布
最新推荐文章于 2024-03-19 05:05:30 发布
阅读量1.4k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript border class function xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JavaAlpha/article/details/6156343
版权

本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~

补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数

JavaAlpha
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JS前端实现分页代码
11-25
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码： 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的  网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用lim
js实现分页功能代码
zybijiso666的博客
02-23 468
分页代码
JavaScript经典实例之分页（简单易用）原生js封装分页
最新发布
m0_61408947的博客
03-19 1009
/每次选择要重新处理按钮//响应点击事件//首页是否有效}else{//前一页按钮是否有效}else{//nav_rela}else{}else{//右边隐藏节点数//选择当前页i++){if(i==curPage){//选择当前页}else{if(leftCount
js代码写分页
weixin_46249441的博客
12-15 1816
完整代码见下： html： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
JS实现分页功能
热门推荐
RockHan
10-28 4万+
为了方便浏览通常将服务器响应回来的大量数据做分页 从实现方式上来说分页基本分为两种方式： 1.查询所有数据返回给客户，通过显示指定区间实现分页，这种方法一般是指JS分页 2.通过客户发送的请求，构造sql语句，查询表中的一段数据。 --------------------------------------------------------------------------------...
7种JS脚本分页代码
u011425213的专栏
07-19 436
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> body {font-size: 12px;} .pages {  color: #000000;  cursor: default;  font-size: 10px;  font-family: Tahoma, Verdana;  padding
javascript 新闻标题静态分页代码 (无刷新)
01-21
因为记录只是一个标题，一个链接，字节数不会太大， 那么用js去用这个大数组进行分页，貌似不错,很节约带宽! 还是很棒的，简单，实用，值得推荐！ JS代码： 代码如下: function title_array(title, link_add, store...
jQuery ajax无刷新分页插件jquery.pagination.js示例
05-15
ajax方式的jQuery前端分页插件，其核心代码jquery.pagination.js已随示例打包，Demo中包括了5种不同的分页效果演示，全部是Ajax无刷新方式实现分页，对于搞前端开发的朋友来说，这是个值得收藏的代码特效，为以后...
jQuery插件pagination实现分页特效
10-24
ajax方式的jQuery前端分页插件，其核心代码jquery.pagination.js已随示例打包，Demo中包括了5种不同的分页效果演示，全部是Ajax无刷新方式实现分页，对于搞前端开发的朋友来说，这是个值得收藏的代码特效，...
使用js来实现分页功能
CQXXTXX的博客
10-24 3470
使用js实现分页功能
经典的10种JS分页代码
10-28
ASP分页代码都得熟悉，JS分页代码你熟悉吗？精心集的分页代码。
js分页代码,分页代码
07-10
用JS实现分页技术，可以对文本进行分页的，也不知道在那里下载到得，一直收藏的。现在贡献给CSDN里的同行。 放到body中就好了。
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
js 分页功能实现
m0_72759446的博客
05-12 754
当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。
JavaScript分页功能如何实现
xiaojie513的博客
05-11 1009
函数用于显示分页链接。具体实现可以根据具体需求进行调整。函数用于从数据源中获取当前页显示的数据，函数用于显示当前页的数据，
js分页代码分享
weixin_30482181的博客
04-28 427
js代码 var home_page=1;//首页 var curr_page=1;//当前页 var last_page=10;//尾页 var yema_num = 6;//页码数 var page_row=1;//每页的条数 var count_page=0;//总页数 var count_row=0;//总条数 var left_page=1;//最左端...
Windows操作系统 分页文件 | 九七的Windows开发
九七的博客
06-19 7559
Windows 分页文件 环境 Windows7 64位 一、定义介绍   分页一词由Paging翻译而来。所谓的分页，其本质是对页的一种操作。页是磁盘和内存间传输数据块最小单位
帮我写一个Java 分页查询代码
09-04
### 回答1： 好的，我可以帮你写一个Java 分页查询代码。以下是示例代码： ```java public List<User> findUsersByPage(int pageNum, int pageSize) { int start = (pageNum - 1) * pageSize; String sql = "SELECT * FROM user LIMIT ?, ?"; List<User> userList = jdbcTemplate.query(sql, new Object[]{start, pageSize}, new BeanPropertyRowMapper<>(User.class)); return userList; } ``` 请注意，这只是一个示例代码，具体实现可能因应用场景而异。 ### 回答2： 当我们在使用Java编写分页查询代码时，通常需要以下几个步骤： 1. 首先，我们定义一个包含分页信息的类，该类包括当前页码、每页显示多少条数据以及总共有多少条数据等信息。 ```java public class PageInfo { private int currentPage; private int pageSize; private int total; // 省略getter和setter方法 } ``` 2. 接着，我们需要定义一个方法来执行分页查询。该方法接受一个PageInfo对象作为参数，以及其他可能的查询条件，然后返回对应分页数据的集合。 ```java public List<Object> queryWithPagination(PageInfo pageInfo, String condition) { // 根据查询条件condition执行数据库查询，获取满足条件的总行数total // 计算总页数 int totalPage = (int) Math.ceil((double) pageInfo.getTotal() / pageInfo.getPageSize()); // 获取当前页的起始索引 int startIndex = (pageInfo.getCurrentPage() - 1) * pageInfo.getPageSize(); // 根据起始索引和每页显示数量，执行数据库查询，获取对应分页数据的集合 List<Object> resultList = new ArrayList<>(); // 省略数据库查询过程 return resultList; } ``` 3. 最后，我们可以在调用该方法时传入PageInfo对象来获取分页数据。 ```java public static void main(String[] args) { PageInfo pageInfo = new PageInfo(); pageInfo.setCurrentPage(1); pageInfo.setPageSize(10); String condition = "WHERE age > 20"; // 假设这是查询条件 List<Object> resultList = queryWithPagination(pageInfo, condition); // 处理查询结果 // 省略代码 } ``` 通过以上三个步骤，我们就可以实现一个简单的Java分页查询代码。当然，实际应用中可能还需要处理异常、连接数据库等其他操作，这里只给出了一个基本框架。 ### 回答3： 当需要进行分页查询时，可以通过给定的页码和页面大小来控制查询的结果。下面是一个简单的Java分页查询代码示例： ```java import java.util.List; public class PageQuery { // 假设数据库中有一个名为"User"的表，包含id、name、age等字段 public List<User> getPageResults(int pageNumber, int pageSize) { // 根据页码和页面大小计算起始索引 int startIndex = (pageNumber - 1) * pageSize; // 假设这是从数据库中查询出的结果列表 List<User> userList = getAllUsersFromDB(); // 根据起始索引和页面大小截取需要的结果列表 List<User> pageResults = userList.subList(startIndex, Math.min(startIndex + pageSize, userList.size())); return pageResults; } private List<User> getAllUsersFromDB() { // 这里是从数据库中查询所有用户记录的逻辑，返回一个包含全部用户的列表 // 假设已经实现了获取所有用户的方法 return userList; } } ``` 以上代码中，getPageResults方法接收页码和页面大小作为参数。根据页码和页面大小计算起始索引，在数据库中查询出所有用户的列表后，再根据起始索引和页面大小进行截取，返回一页的查询结果。 这只是一个简单的示例，真实应用中可能会涉及到更复杂的逻辑，例如使用数据库的分页查询语句或结合前端界面进行分页展示等。希望能够对你的问题有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值