<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.firs{ color:#f00; margin-left:5px; cursor:pointer}
.last{ color:green; margin-left:5px; cursor:pointer}
.prev{ color:#fc0; margin-left:5px;cursor:pointer }
.next{ color:#fcc; margin-left:5px; cursor:pointer}
.norm{ margin-left:5px; cursor:pointer}
.sele{ margin-left:5px;font-weight:bold;cursor:pointer}
</style>
</head>
<body>
<div id="panel"></div>
<script>
function Pager() {
var o =this;
o.setting = {
p: 1, //当前锁定页
pc: 0, //总页数
size: 5, //每页的页码数量
fun: function (p) { } //外部调用的function
}
o.css = {
firs: 'firs',//首页 className
last: 'last',//末页 className
prev: 'prev',//上一页 className
next: 'next',//下一页 className
norm: 'norm',//未选中页 className
sele: 'sele' //选中页 className
}
var getSpan = function () {
return document.createElement("span");
}
var getP = function (p, txt) {
txt = txt || p;
var _span = getSpan();
_span.innerHTML = txt;
_span.setAttribute("p", p);
_span.onclick = function () {
o.setting.p = p;
o.setting.fun(this.getAttribute("p"));
}
return _span;
}
var getCSSP = function (p) {
var CSSP = getP(p);
if (p == o.setting.p) {
CSSP.className = o.css.sele;
} else {
CSSP.className = o.css.norm;
}
return CSSP;
}
//获得当前设置下的页码 html 元素
o.get = function () {
var _docFrag = document.createDocumentFragment();
//上一页
if (o.setting.p > 1) {
var _firstP = getP(1, '首页');
_firstP.className = o.css.firs;
_docFrag.appendChild(_firstP);
var _prevP = getP(o.setting.p - 1, '上一页');
_prevP.className = o.css.prev;
_docFrag.appendChild(_prevP);
}
if (o.setting.pc < o.setting.size) {
for (var p = 1; p <= o.setting.pc; p++) {
var _span = getCSSP(p);
_docFrag.appendChild(_span);
}
} else {
var star_p = o.setting.p - (o.setting.size - 1) / 2;
if(star_p>0){
for (var i = 0; i < o.setting.size; i++) {
var p = star_p + i;
if (p <= o.setting.pc) {
var _span = getCSSP(p);
_docFrag.appendChild(_span);
}
}
}else{
for(var p = 1; p<= o.setting.size;p++){
var _span = getCSSP(p);
_docFrag.appendChild(_span);
}
}
}
//下一页
if (o.setting.p < o.setting.pc) {
var _nextP = getP(o.setting.p + 1, '下一页');
_nextP.className = o.css.next;
_docFrag.appendChild(_nextP);
var _lastP = getP(o.setting.pc, '末页');
_lastP.className = o.css.last;
_docFrag.appendChild(_lastP);
}
return _docFrag;
}
}
//demo
var panel = document.getElementById('panel');
var p = new Pager();
p.setting.p = 20; //设置当前锁定页 为 20
p.setting.pc = 30; //设置 总页数 为 30
p.setting.fun = function(p_num){ //当点击 某页的时候 触发的函数
//ajax.ashx?action=getmsg&p=p_num
panel.innerHTML = '';
panel.appendChild(p.get());
}
panel.appendChild(p.get()); //把页码append 到 容器中
</script>
</body>
</html>
分享到：
相关推荐
本教程将详细介绍如何在JSP中实现一个简单的分页界面，以帮助初学者掌握这一关键技能。 首先，我们要理解分页的基本概念。分页通常涉及到两个主要部分：前端展示和后端逻辑。前端负责展示分页链接和当前页的信息，...
在本教程中，我们将深入探讨如何在Visual Studio 2008（VS2008）环境中创建一个分页界面，同时讨论排版打印参数设置的相关知识。 1. **分页基础**： 分页是数据展示的一种常见策略，特别是在处理大量数据时，以...
在JavaWeb开发中，"JavaWeb+JSP+Servlet+JDBC分页查询和查询后分页界面优化"是一个常见的需求，特别是在构建大型的、数据密集型的学生管理系统中。这个主题涵盖了许多关键知识点，让我们逐一深入探讨。 首先，...
为了解决这个问题，我们可以实现分页功能，让数据分批次加载，从而提高界面响应速度。本文将深入探讨如何在`QTableWidget`和`QTableView`中实现分页栏。 首先，我们需要理解`QTableWidget`和`QTableView`的区别。`...
例如，你可以定义一个分页模块，包含获取数据、处理数据和渲染分页界面的逻辑： ```javascript define('pageControl', function(require, exports, module) { var page = 1; var pageSize = 10; function fetch...
6. **创建分页控件**：为了允许用户导航到不同页面，你需要创建分页界面元素，如页码按钮。你可以使用MVVM模式，通过命令处理按钮点击事件，或者在代码-behind中直接处理。 7. **处理分页按钮点击**：当用户点击...
5. 自定义分页界面：可以使用PagerControl或其他UI元素创建自定义的分页界面，如上一页、下一页、页码选择等。 五、自定义分页方式 除了使用控件自带的分页样式，开发者还可以自定义分页方式，例如： - 动态分页：...
如果需要更个性化的分页界面，可以通过CSS自定义页码按钮样式，或者使用第三方控件如AjaxControlToolkit的PagingControl，提供更丰富的用户界面。 通过以上知识点，你应该能理解并实现ASP.NET AJAX分页。在实际...
通过设置ListView的PageCount和PageSize属性，以及使用PagingTemplate来定义分页界面。 5. 自定义分页 对于更复杂的需求，开发者可能需要自定义分页逻辑。这通常涉及到数据库查询的调整，例如使用SQL Server的...
- **用户体验**：设计分页界面时，应考虑到用户体验，比如合理设置每页显示的记录数，以及提供快速跳转到特定页的功能。 - **安全性**：在处理分页参数时，需注意防止SQL注入等安全风险。 总结来说，Freemarker的...
3. **展示分页界面**： - 自定义标签需要生成HTML代码来呈现分页条。例如，淘宝分页样式可能包括上一页、下一页、数字链接等元素，这些都需要在Java类中动态生成。 - 考虑到不同的分页样式，可以设计多个标签，每...
4. **编写前端页面**：使用HTML和JavaScript构建分页界面，引入DWR生成的JavaScript文件。 5. **编写JavaScript代码**：创建DWR对象，设置分页按钮的点击事件，调用后台的分页方法。 6. **测试与优化**：运行项目...
4. **前端分页界面构建**：设计并实现分页UI，包括页码按钮、跳转输入框等元素，以及对应的事件监听和处理函数。 5. **分页逻辑实现**：详细讲解分页的逻辑处理，如计算总页数、判断是否为首页或末页、处理页码点击...
6. **响应式设计**：为了适应不同设备，分页界面需要具有良好的响应性。可以使用CSS媒体查询来调整按钮的布局和大小。 7. **优化用户体验**：为了提升用户体验，可以添加一些额外的功能，如输入框让用户直接跳转到...
3. **创建分页界面**：使用HTML和CSS构建分页导航，通常包含“上一页”、“下一页”和页码按钮。这些元素可以通过jQuery动态生成。 4. **绑定事件**：使用jQuery的`.on()`方法为分页按钮添加点击事件监听器。当用户...
- ext网页分页：使用EXT组件库的分页工具，创建直观的分页界面。 7. **实际应用** 这些分页实现方式广泛应用于各种Web应用，如电商网站的商品列表、论坛帖子、新闻列表等，确保了用户在浏览大数据集时的流畅体验...
4. **jpager配置与使用**：在视图层，jpager提供了便利的方法来渲染分页链接和导航，开发者需要配置jsp或freemarker等模板文件，以展示分页界面。 5. **事件处理**：当用户点击分页链接时，需要捕获对应的请求，...
综上所述，"ecshop后台分页示例代码"提供了ECShop后台实现文章列表分页的一个实例，涵盖了PHP处理分页逻辑、Smarty模板展示分页界面以及数据库操作等方面的知识。通过学习这个示例，开发者可以更好地理解和运用...
- **返回结果**: 将Service返回的分页数据和`Pagination`对象传递给JSP页面，页面根据这些信息渲染分页界面。 5. **Service层实现** - **SQL拼接**: 根据`Pagination`对象的属性动态拼接SQL语句，包含`LIMIT`或`...
1. 设计分页界面：创建包含页码、每页条目数选择等元素的用户界面。 2. 请求数据：前端通过Ajax或Fetch等方法向服务器发送请求，携带页码和每页条目数等参数。 3. 处理响应：后端接收到请求后，计算出需要返回的数据...