写个js 分页玩玩(原创)
- <ul id="page">
- <li class="pagetest">1</li>
- <li class="pagetest">2</li>
- <li class="pagetest">3</li>
- <li class="pagetest">4</li>
- <li class="pagetest">5</li>
- <li class="pagetest">6</li>
- <li class="pagetest">7</li>
- <li class="pagetest">8</li>
- <li class="pagetest">9</li>
- <li class="pagetest">10</li>
- <li class="pagetest">11</li>
- <li class="pagetest">12</li>
- </ul>
- <div id="pageDom"></div>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
- <div class="dibu">
- <script>
- var pageInfo={PageSize:null,TotalItemCount:null,PageNumber:null,PageCount:null,HasPreviousPage:null,HasNextPage:null,frontPageSize:5,backPageSize:4,pageListDomID:null,pageNumberDomID:null};
- pageInfo.pageListDomID="page";
- pageInfo.pageNumberDomID="pageDom";
- pageInfo.PageSize=2;
- GetPageInfo(2);
- function GetPageInfo(pageNumber)
- {
- $("#"+pageInfo.pageListDomID).children().hide().slice((pageNumber-1)*pageInfo.PageSize,pageNumber*pageInfo.PageSize).show();
- pageInfo.TotalItemCount=$("#"+pageInfo.pageListDomID).children().length;
- pageInfo.PageNumber=pageNumber;
- pageInfo.PageCount=Math.ceil(pageInfo.TotalItemCount/pageInfo.PageSize);
- if(pageInfo.PageNumber>1)
- {
- pageInfo.HasPreviousPage=true;
- }else
- {
- pageInfo.HasPreviousPage=false;
- }
- if(pageInfo.PageNumber<pageInfo.PageCount)
- {
- pageInfo.HasNextPage=true;
- }else
- {
- pageInfo.HasNextPage=false;
- }
- updatePage(pageInfo.pageNumberDomID);
- }
- function updatePage(id)
- {
- $("#"+id).empty();
- if (pageInfo.HasPreviousPage)
- {
- $("#"+id).append('<span class="hag"><a href="javascript:GetPageInfo(pageInfo.PageNumber - 1);">上一页</a></span>');
- }
- for (var i = pageInfo.PageNumber - pageInfo.frontPageSize; i <= pageInfo.PageNumber + pageInfo.backPageSize; i++)
- {
- if (i >= 1 && i <= pageInfo.PageCount)
- {
- if (pageInfo.PageNumber == i)
- {
- $("#"+id).append('<span class="hag"><a class="on">'+i+'</a></span>');
- }
- else
- {
- $("#"+id).append('<span class="hag"><a href="javascript:GetPageInfo('+i+');">'+i+'</a></span>');
- }
- }
- }
- if (pageInfo.HasNextPage)
- {
- $("#"+id).append('<span class="hag"><a href="javascript:GetPageInfo(pageInfo.PageNumber +1);">下一页</a></span>');
- }
- }
- </script>
- </div>
写个js 分页玩玩(原创)的更多相关文章
- 自写JS分页工具【基于JQ】
好久没有来逛园子,也好久没有更新博客,就像沉睡已久的人忽然被叫醒,忽然就被园友的回复惊醒了.园友提出了关于我之前一篇文章的疑问--可那已经是半年以前的博客了,加上我一直觉得分享给大家的应该是我最新的思 ...
- 手写Koa.js源码
用Node.js写一个web服务器,我前面已经写过两篇文章了: 第一篇是不使用任何框架也能搭建一个web服务器,主要是熟悉Node.js原生API的使用:使用Node.js原生API写一个web服务器 ...
- 纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
- 浅谈js分页的几种方法
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...
- [转]jquery.pagination.js分页
本文转自:http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html 序言 这一款js分页使用起来很爽,自己经常用,做项目时 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- js分页小结
今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- jsp、js分页功能的简单总结
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
随机推荐
- poj3669 广搜
//好久没刷题了,生疏了. 题意分析: 题意理解为在一个二维的正向坐标轴上,一个点(流星)连同它的上下左右的四个点会在某一个时刻被破坏.一个人在原点,问她到达安全区的最小时间是多少. 代码思路: 从原 ...
- c++ 虚函数,纯虚函数的本质区别
转载博客:https://mp.weixin.qq.com/s?__biz=MzAxNzYzMTU0Ng==&mid=2651289202&idx=1&sn=431ffd1fa ...
- classNum 表示学生的班号,例如“class05”。 有如下List List list = new ArrayList();
package a927; import java.util.ArrayList; import java.util.List; class Student { private String name ...
- 【SQL】数值型函数
1. CEIL 语法:CEIL(n) 作用:取大于等于数值n的最小整数 SQL> select ceil(9.1),ceil(9.9),ceil(9) from dual; CEIL(9.1) ...
- 【sqli-labs】 less29 GET- Error based -Impidence mismatch -Having a WAF in front of web application (GET型基于错误的带有WAF注入)
这关有点意思,有一点需要事先注意,这关玩的是login.php而不是默认的index.php 再注入之前需要先了解一下HPP(HTTP Parameter Pollution),详情参照这篇 http ...
- NET MVC FileResult 导出/下载 文件/Excel
参考http://www.cnblogs.com/ldp615/archive/2010/09/17/asp-net-mvc-file-result.html 1.引入NPOI 2.代码 using ...
- 查看占用某端口的进程——netstat、findstr 的使用
netstat 检验本机各端口的网络连接情况 -a 显示所有连接和侦听端口(如Windows共享服务 的135,445端口) -n 不进行IP地址到主机名的解析 -o 显示拥有的与每个连接关联的进 ...
- 团体程序设计天梯赛-练习集-L1-048. 矩阵A乘以B
L1-048. 矩阵A乘以B 给定两个矩阵A和B,要求你计算它们的乘积矩阵AB.需要注意的是,只有规模匹配的矩阵才可以相乘.即若A有Ra行.Ca列,B有Rb行.Cb列,则只有Ca与Rb相等时,两个矩阵 ...
- 08 Django组件-Forms组件
Django的Forms组件主要有以下几大功能: 页面初始化,生成HTML标签 校验用户数据(显示错误信息) HTML Form提交保留上次提交数据 一.小试牛刀 1.定义Form类 from dja ...
- 【剑指Offer】52、正则表达式匹配
题目描述: 请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹 ...