一个js实现的分页功能

分页,一直是个令我头疼的问题,用java写网站的时候 ,需要用到分页功能,那时候是定义一个分页用的类,感觉比较麻烦,不过在数据量大的时候,应该会比较合适

去年做项目的过程中,用的是下拉刷新的组件,是别人写的,实现起来不方便, 效果也不太好

偶然在网上看到过js的分页功能,想想既然java能实现,js肯定是也能实现的。

参考网上的内容,稍微修改了下,暂且称之为0.1版

具体方法:先将所有的数据取出来,并用html展示出来,但用js去控制html标签的显示与隐藏,算是从另一个角度实现了分页功能

这一版的功能比较简陋,页面也不好看,代码就不上传了。这几天找个时间优化一下,再上传修改过的代码

时间: 2024-10-11 03:52:37

一个js实现的分页功能的相关文章

jsp、js分页功能的简单总结

一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分页技术,有选择的加载某部分数据,在数据量较大的时候,分部分加载数据.显示数据,可以有效提高程序的性能,当然,单纯的js的分页技术并没有这种效果. 所以,分页技术是web技术中比较常用的技术,而下面讨论的主要是两种分页技术:一种是jsp的分页技术,其读取数据分批次读取,操作页数跳转的时候才加载相应页面

简单封装分页功能pageView.js

分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复工作量.在实际项目中,尤其是网站类型的项目中,分页部分的设计总是个性化比较强,基本上都不会长的一样,所以可能之前抽象出来的东西,如果写的不够灵活的话,对这些个性化强的项目来说,可能直接应用的时候也得做些调整才行.本文尝试提供一个尽量满足这两方面要求的分页组件. 先介绍下写这个东西的背景:一直以来,我

非常不错的一个JS分页效果代码

这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原理还是相通的,感兴趣的朋友做个参考吧. 例子,js分页效果代码. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

如何用angularjs制作一个完整的表格之二__表格分页功能

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""

Node.js 博客实例(七)分页功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第七章,由于版本等的原因,在原教程基础上稍加改动即可实现. 给博客的主页和用户页面增加分页功能.设定:主页和用户页面每页最多显示十篇文章. 这里要用到 mongodb 的 skip 和 limit 操作. 打开 post.js ,把 Post.getAll 函数修改如下: //读取文章及其相关信息 Post.getTen = function(name,page,callback) { //打开数据

网站前端_JavaScript-项目经验.纯JavaScript实现客户端的分页功能?

项目简介: 说明: 此项目属于医院电子病例系统,由于历史原因,整个系统后台基于Java开发,前端使用Html+CSS+原生JavaScript,项目功能模块要求必须纯JS实现,而此次的任务是为住院病例页面编写一个客户端分页功能. 实现思路: 1. 基于客户端分页的前提是数据已经加载完毕,所以此功能模块必须等待数据加载完毕后再加载 2. 基于客户端分页的首页只需要显示24个患者信息即可 3. 上一页/当前页/下一页功能类似,基于当前页面传递同样的参数(页码, 限制患者数),所以自然而然想到了递归,

PHP连接数据库实现多条件查询与分页功能——关于租房页面的完整实例操作

租房页面如图: 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>租房子</title>        <script src="bootstrap/js/jquery-1.11.2.min.js"></script> //引入bootstrap前端框架的三个

分页功能

利用sui实现分页功能 先把相应的js和css引入,在把配置的方法写好,在页面的底部加上一个div   <div id = "div1"></div> 然后在页面上加入插件的相应API $('#div1').pagination({ pages: ${totalPage },//总页数 styleClass: ['pagination-large'], showCtrl: true, displayPage: 6, currentPage:${currentPa

扩展GridView实现的一个自定义无刷新分页,排序,支持多种数据源的控件TwfGridView

最近项目View层越来越趋向于无刷新化,特别是数据展示方面,还要对Linq有很好的支持.在WebFrom模式的开发中,GridView是一个功能很强大,很常用的控件,但是他也不是完美的,没有自带的无刷新和排序(有人说UpdatePanel或第三方插件就可以实现无刷新,但是呵呵...那是重量级的无刷新实现,相信不少朋友和我一样讨厌UpdatePanel,引入一大堆很长的js库且不说,用起来感觉不到一点无刷新带来的快速),也不支持部分数据绑定分页(有人说部分数据绑定也可以用aspNetPager等第