js分页插件
//分页插件1
function showView(option) {
//参数定义id,页容量,当前页,总数,页总数
var id = option.id,
pageSize = option.pageSize,
currentPage = option.currentPage,
totalCount = option.totalCount,
pageCount = 0;
var textHtml = "";
if (Number(pageSize) && Number(totalCount) && Number(currentPage)) {
pageCount = (parseInt(totalCount / pageSize)) + 1;
textHtml = "<span class='coseSpan' value='1'><a href='javascript:;'>首页</a></span>";
if (currentPage > 1) {
textHtml += "<span class='coseSpan' value = '" + (parseInt(currentPage) - 1) + "'><a href='javascript:;'>上一页</a></span>";
} else {
textHtml += "<span class='eleSpan' value = '1'>上一页</span>";
}
if (currentPage < pageCount) {
textHtml += "<span class='coseSpan' value = '" + (parseInt(currentPage) + 1) + "'><a href='javascript:;'>下一页</a></span>";
} else {
textHtml += "<span class='eleSpan' value = '" + (parseInt(currentPage) + 1) + "'>下一页</span>";
}
textHtml += "<span class = 'coseSpan' value='" + parseInt(pageCount) + "'><a href='javascript:;'>尾页</a></span>";
} else {
textHtml += "<span>首页</span><span>上一页</span><span>下一页</span><span>尾页</span>";
}
//加载页面
$("#" + id).html(textHtml);
//注册事件
$("span .coseSpan").unbind("click").click(function() {
//获取当前页
var pageIndex = $(this).attr("value");
if (pageIndex && Number(pageIndex)) {
option.getPrassBar(parseInt(pageIndex), pageSize);
}
});
}
//分页插件2
function showPageBar(option) {
var id = option.id,
pageSize = option.pageSize,
currentPage = option.currentPage,
toltalCount = option.toltalCount;
var textHtml = "";
if (Number(toltalCount) && Number(pageSize) && Number(currentPage)) {
//获取有多少页
pageCount = parseInt(toltalCount / pageSize) + 1;
//计算开始下标
var startIndex = (currentPage - 1) * pageSize + 1,
endIndex = currentPage * pageSize;
if (endIndex < toltalCount) {
textHtml += "显示" + startIndex + "到" + endIndex + "条记录,共" + toltalCount + "条记录 ";
} else {
textHtml += "显示" + startIndex + "到" + toltalCount + "条记录,共" + toltalCount + "条记录 ";
}
if (currentPage == 1) {
textHtml += "<span class='NowcChangePage' value='1' title='首页'><<</span> <span class='NowChangePage' value='1' title='上一页'><</span> ";
} else {
textHtml += "<span class='changePage' value='1' title='首页'><a href='javascrpit:void(0)'><<</a></span> <span class='changePage' value='" + (currentPage - 1) + "' title='上一页'><a href='javascrpit:void(0)'><</a></span> ";
}
if (pageCount > 6) {
if ((currentPage == 1 || currentPage == 2)) {
for (var i = 1; i <= 3; i++) {
if (i == currentPage) {
textHtml += "<span class='changePage' value='" + i + "'>" + i + "</span>";
} else {
textHtml += "<span class='changePage' value='" + i + "'><a href='javascript:void(0)'>" + i + "</a></span>";
}
}
textHtml += "...";
for (var n = (pageCount - 2); n <= pageCount; n++) {
textHtml += "<span class='changePage' value='" + n + "'><a href='javascript:void(0)'>" + n + "</a></span>";
}
} else {
if ((pageCount - currentPage) > 4) {
for (var i = (currentPage - 1); i <= (currentPage + 1); i++) {
if (i == currentPage) {
textHtml += "<span class='changePage' value='" + i + "'>" + i + "</span>";
} else {
textHtml += "<span class='changePage' value='" + i + "'><a href='javascript:void(0)'>" + i + "</a></span>";
}
}
textHtml += "...";
for (var n = (pageCount - 2); n <= pageCount; n++) {
textHtml += "<span class='changePage' value='" + n + "'><a href='javascript:void(0)'>" + n + "</a></span>";
}
} else {
//找出起始元素
for (var n = (pageCount - 5); n <= pageCount; n++) {
if (n == currentPage) {
textHtml += "<span class='changePage' value='" + n + "'>" + n + "</span>";
} else {
textHtml += "<span class='changePage' value='" + n + "'><a href='javascript:void(0)'>" + n + "</a></span>";
}
}
}
}
} else {
for (var i = 1; i <= parseInt(pageCount); i++) {
if (currentPage == i) {
textHtml += "<span class='NowchangePage' value='" + i + "'>" + i + "</span>";
} else {
textHtml += "<span class='changePage' value='" + i + "'><a href='javascrpit:void(0)'>" + i + "</a></span>";
}
}
}
if (currentPage == pageCount) {
textHtml += " <span class='NowcChangePage' value='1' title='下一页'>></span> <span class='NowChangePage' value='1' title='尾页'>>></span>";
} else {
textHtml += " <span class='changePage' value='" + (currentPage + 1) + "' title='下一页'><a href='javascrpit:void(0)'>></a></span> <span class='changePage' value='" + pageCount + "' title='尾页'><a href='javascrpit:void(0)'>>></a></span>";
}
$("#" + id).html(textHtml);
$("span .changePage").unbind("click").click(function() {
var currentIndex = parseInt($(this).attr("value"));
if (Number(currentIndex)) {
option.getPrassBar(parseInt(currentIndex), pageSize);
}
});
}
}
//html代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="分页插件._Default" %>
<!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 runat="server">
<title>无标题页</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/paging.js" type="text/javascript"></script>
<script type="text/javascript">
function loadPage(currentPage,pageSize) {
showView({
id: "page",
pageSize: pageSize,
currentPage: currentPage,
totalCount: 0,
getPrassBar: function(pageIndex, pageSize) {
alert("页下标:" + pageIndex + "页容量:" + pageSize);
loadPage(pageIndex, pageSize);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="加载分页控件" onclick="loadPage(1,10)" /></div>
<div>
<span id="page"></span>
</div>
</form>
</body>
</html>
js分页插件的更多相关文章
- Bootstrap的js分页插件属性介绍
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- Jquery.Page.js 分页插件的使用
1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...
- JQuery.Page.js分页插件的使用
1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...
- twbsPagination.js分页插件
分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现 ...
- Js分页插件,支持页面跳转
这里先给出API: 你只需要提供一个对象涉及以下几项属性,你来设置属性值,通过jq对象链式调用page()以参数形式来加载这个对象,按照参数要求会自动生成分页功能, 参数中pageEvent是可以让你 ...
- js 分页插件(jQuery)
参考:http://www.jb51.net/article/117191.htm 侵删 css 部分 @charset "utf=8"; *{ box-sizing: borde ...
- jquery.pagination.js分页插件的使用
Pagination的相关参数: Pagination使用的核心代码: //回调函数 function pageselectCallback(page_index, j ...
- 一个比较轻巧好用的js分页插件,可ajax可url
var pageNav = pageNav || {}; pageNav.fn = null; pageNav.pre = "pre"; pageNav.next = " ...
随机推荐
- ASPNET Razor 使用 @Ajax.BeginForm 需要注意到的细节
创建空的web项目,通过Nuget引用mvc组件来搭建空的MVC项目时, 在视图页面中无法使用@Ajax.BegForm来进行异步提交数据, 而新建默认的MVC模板项目却能够正常使用@Ajax.Beg ...
- nginx: 添加文件下载目录
修改nginx.conf,添加如下行: location /file/ { alias /usr/share/nginx/html/file/; add_header Content-di ...
- 使用SQL Profile及SQL Tuning Advisor固定运行计划
SQL Profile就是为某一SQL语句提供除了系统统计信息.对象(表和索引等)统计信息之外的其它信息,比方执行环境.额外的更准确的统计信息,以帮助优化器为SQL语句选择更适合的执行计划. SQL ...
- Wireshark网络分析实战笔记(一)抓包过滤器
抓包过滤器和显示过滤器的差别: 1.抓包过滤器配置在抓包之前,wireshark仅仅抓取抓包过滤器过滤的数据 2.显示过滤器配置在抓包后,wireshark已经抓取全部的数据包,显示过滤器让wires ...
- LeetCode 171. Excel Sheet Column Number (Excel 表格列数字)
Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...
- 发现所有的字都被加上了 <font> 标签,导致样式全部错乱
经检查,发现我的浏览器默认打开了翻译软件!!!!!!!
- python 数据描述字符串转整数
q3 = int(float(q3.replace('万', '')) * 10000)
- 【Poj1325】Machine Schedule机器调度
目录 List Description Input Output Sample Input Sample Output HINT Solution Code Position: http://poj. ...
- Python中操作myslq的方法
实例1.取得MYSQL的版本 在windows环境下安装mysql模块用于python开发,请见我的另一篇文章: MySQL-python Windows下EXE安装文件下载 # -*- coding ...
- VPS主机
腾讯云企业认证 备案域名要是顶级域名格式,所以不能是www.blueheartzf.com,而要是blueheartzf.com