- 浏览: 388468 次
- 性别:
- 来自: 青岛
博客专栏
-
wordpress步步高
浏览量:74329
-
Web前端开发之路
浏览量:90468
-
Flex/ActionSc...
浏览量:62284
-
Android/IOS 开...
浏览量:34509
-
PHP项目实战
浏览量:23848
文章分类
最新评论
-
u013810758:
editplus
个人觉得 SublimeText 目前最好用的 文本编辑器 -
u010189889:
poll.zip (13.7 KB) 这个文件是干什么的?
手把手做一个PHP 投票系统 -
freerambo:
不错 赞一个
完美的 登录注册框 含漂亮的过渡、转换效果 -
uule:
不错不错,楼主好屌
国外经典JS、Jquery 各种资源集合 -
zyl324:
真心不错,学习了
用jquery都弱爆了 纯css 实现焦点图的 动态绚丽效果
问题:
实现如下功能需求
1.table 按行数 分页
2.js 实现客户端无刷新效果
3.分页脚注 比较美观
4.可扩展 维护性比较好
<html version="-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<style type="text/css">
.pg-normal {
color: black;
font-weight: normal;
text-decoration: none;
cursor: pointer;
}
.pg-selected {
color: black;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
</style>
<script type="text/javascript" src="paging.js"></script>
</head>
<body>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<table id="results">
<tr>
<th>#</th>
<th>field</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="field-name" value="rec1"></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="field-name" value="rec2"></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="field-name" value="rec3"></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="field-name" value="rec4"></td>
</tr>
<tr>
<td>5</td>
<td><input type="text" name="field-name" value="rec5"></td>
</tr>
<tr>
<td>6</td>
<td><input type="text" name="field-name" value="rec6"></td>
</tr>
<tr>
<td>7</td>
<td><input type="text" name="field-name" value="rec7"></td>
</tr>
<tr>
<td>8</td>
<td><input type="text" name="field-name" value="rec8"></td>
</tr>
<tr>
<td>9</td>
<td><input type="text" name="field-name" value="rec9"></td>
</tr>
<tr>
<td>10</td>
<td><input type="text" name="field-name" value="rec10"></td>
</tr>
</table>
<div id="pageNavPosition"></div>
<div><input type="submit" onclick="alert('Hey, this is just a sample!'); return false;" /> <input type="reset" /></div>
</form>
<script type="text/javascript"><!--
var pager = new Pager('results', 3);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>
</body>
</html>
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> | ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
}
如果要实现美观效果 可自己加入css
实例扩展如下
相应css代码
#pageNavPosition{ margin: 20px 0 0; padding: 3px; text-align: center; } .pg-normal { border: 1px solid #DDDDDD; cursor:pointer; color: #61AF3F; margin-left: 2px; padding: 2px 5px; text-decoration: none; } .pg-selected { background-color: #A1D888; border: 1px solid #B2E05D; color: #638425; padding: 2px 5px; cursor:pointer; }
发表评论
-
一款基于bootstrap的datetimepicker
2013-05-29 15:49 1677<!DOCTYPE HTML> < ... -
php/js/jquery等各种语言版本—检测终端类型和浏览器类型
2013-05-29 15:45 928<?php if ( (strpos( ... -
博文转移到个人网站,欢迎大家访问!!!
2013-05-13 22:40 1454http://ismartstudio.com 欢迎 ... -
推荐一款神器,桌面远程调试IOS网站的工具 很好很强大 支持国产!
2013-04-04 11:09 2418MIHTool 是前端工程师在 ... -
绚丽的图片文字 跟随过渡切换焦点图设计
2013-03-25 14:00 1439<!DOCTYPE html> &l ... -
看一眼你就会爱上它 10种不同风格任你选
2013-03-22 09:25 1335看一眼你就会爱上它 10种不同风格任你选 .vi ... -
圆形的hover效果 多种style可供选择见demo
2013-03-15 14:45 1922当鼠标浮动时 会呈现圆形的富有生动的多重样式的动态效果 ... -
图片hover状态平滑划过过渡效果
2013-03-15 14:38 2185附源码 //first preload ... -
页面滑到底端弹出提示表单
2013-03-05 10:51 1271<p id="last" ... -
一款漂亮的滑动表单
2013-03-05 10:46 1863<h1>Fancy Sliding Form ... -
php版本 化妆程序 给图片添加饰物
2013-03-05 10:20 1591大家估计都用手机玩过 化妆整人的程序 也就是对照片加工处 ... -
完美的 登录注册框 含漂亮的过渡、转换效果
2013-03-04 17:29 3321<div id="cont ... -
大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动
2013-03-04 11:07 2901像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采 ... -
jquery实现 购物车 信息 级联改变
2013-01-29 15:07 1988<!DOCTYPE html PUBLIC &quo ... -
发现一款很酷的jquery 相片墙翻牌效果
2013-01-16 16:10 4319可用于 企业网站中的 赞助商、 合作伙伴、 公司 ... -
国外经典JS、Jquery 各种资源集合
2013-01-15 11:03 37721,首推 Jquery 官网 http://jquery. ... -
鼠标悬浮 浮动放大 expand 效果
2013-01-10 10:09 2410要求效果: 1.鼠标浮动在div上 要求div动态浮 ... -
带提示的input输入框类似html5的 placeholder
2012-10-18 14:39 3584Html5带来了 placeholder <input ... -
瀑布流展示示例- 带旋转的图文展示 好东西与大家分享 附源码
2012-10-17 11:22 2596很流行的瀑布流展示 并且当鼠标悬浮 旋转 ... -
仿淘宝 智能跟随菜单提示栏 智能浮动的菜单
2012-10-17 10:25 2616<!DOCTYPE html> < ...
相关推荐
bootstrap-table客户端分页实例,数据源为前端数据,用于测试json数据填充后,形成表格数据类型,初级入门~
js实现无刷新分页
使用ajax 实现无刷新分页,指定页码跳转等……内置sql!适合练习参考……
SSH+Mysql无刷新分页实例,导入数据库,运行即可
thinkphp+ajax无刷新分页,方便快捷,简单易行
dwr实现无刷新分页dwr实现无刷新分页dwr实现无刷新分页dwr实现无刷新分页dwr实现无刷新分页dwr实现无刷新分页dwr实现无刷新分页dwr实现无刷新分页
利用Jsp+Ajax实现页面无刷新的分页,该程序主要就是实现分页,没有其他模块
C# 无刷新分页 mvc 表格案例
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css <link rel="stylesheet" href="../plugins/...
此源码使用了Jquery.Pagination.js+Jquery.Ajax+Asp.net技术实现了无刷新分页的效果。其中用到的Asp.net知识有Linq to sql和ashx技术。分页插件可以自定义样式,自定义的样式在pagenumstyle.css文件中。项目使用vs...
利用jquery发起ajax请求向页面发送json字符串实现无刷新的分页案例,适合新手使用
使用Ajax实现无刷新分页显示方便,易懂
rt...JS与ASHX实现无刷新分页
ASP+ajax 实现无刷新分页效果 小弟刚学AJAX 呵呵。。。
实用的JS无刷新分页代码。 新手适合使用
运行环境vs2010 利用js实现页面不刷新分页功能
NULL 博文链接:https://shareisattitude.iteye.com/blog/2189298
mvc5分页 mvc5分页 mvc5分页 mvc5分页 mvc5分页 mvc5分页 mvc5无刷新分页 mvc5无刷新分页 mvc5无刷新分页 mvc5无刷新分页 mvc5无刷新分页 mvc5无刷新分页
js实现table分页可以动态生成table
js分页示例,前台分页,客户端分页,分页机制,js分页