页码js,支持ajax无刷新翻页
来源:互联网 发布:linux默认命令行启动 编辑:程序博客网 时间:2024/06/05 06:16
前阵子工作需要做一个支持ajax无刷新翻页的页码控件,在网上找了别人的例子修改的~(里面class神马的懒得去改了,直接简单写了下)下载链接~
<!doctype html><html><head><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="" /><script type="text/javascript" src="http://www.csdn.net/js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="jquery.PageBar.js"></script><style type="text/css">/*reset*/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px Arial, Tahoma, 宋体; color:#454545; }button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font-size:100%; }h2, h3 { font-size:14px; }button, input, select, textarea, label { vertical-align:middle; outline:none; }img { vertical-align:top; border:none; display:inline-block; background:#fff url(/images/common/nopic.png) center no-repeat; }ul, ol { list-style:none; }a { text-decoration:none; color:#454545; vertical-align:baseline; cursor:pointer; }a:hover { text-decoration:underline; color:#000; }table { border-collapse:collapse; border-spacing:0; }body { background:#ddd; word-wrap:break-word; word-break:break-all; _height:100%; }.g-page{ margin:20px 0; }.g-page a{ display:inline-block; height:28px; padding:0 8px; line-height:28px; margin:0 2px; background:#FAFAFA; border:1px solid #ccc; border-radius:3px; }.g-page a.g-btn-cur,.g-page a:hover{ color:#fff; background:#E95A59; }.g-lh-22{ line-height:22px !important; }.g-ta-c{ text-align:center !important; }.g-pr-10{ padding-right:10px !important; }.g-input-text { height:23px; line-height:23px; border-width:1px; border-style:solid; border-color:#454545 #ccc #ccc #454545; padding-left:3px; }.g-input-text:hover, .g-input-text.focus { background-color:#fffcc5; }</style></head><body><form id="page_form"><div class="g-page g-page2"> </div></form><script type="text/javascript">function setPageBar(page) { //设置分页信息 var pageOptions = { AllowPaging: true, PageIndex: page, //设置当前页码 PageSize: 15, //设置分页大小 RecordCount: 1092, //设置数据总数 TotalPage: 73, //设置总页数 showPageCount: 4, onPageClick: function(pageIndex) { //自定义您的翻页事件 setPageBar(pageIndex+1); return false; } } //初始化分页栏 $('.g-page').pageBar(pageOptions);}$(document).ready(function() { setPageBar(6);})</script></body></html>
引入一个js文件/**************************/ //JQuery分页栏 /**************************/ $.fn.pageBar = function(options) { var configs = { PageIndex: 1, PageSize: 15, TotalPage: 0, RecordCount: 0, showPageCount: 4, onPageClick: function(pageIndex) { return false; //默认的翻页事件 } } $.extend(configs, options); var tmp = "", i = 0, j = 0, a = 0, b = 0, totalpage = parseInt(configs.RecordCount / configs.PageSize); totalpage = configs.RecordCount % configs.PageSize > 0 ? totalpage + 1 : totalpage; tmp += "<p class=\"g-arr-r g-lh-22\">找到<strong>" + configs.RecordCount + "</strong>条结果</p>"; tmp += "<p class=\"g-ta-c g-pr-10\">"; if (configs.PageIndex > 1) { tmp += "<a title=\"上一页\" class=\"g-btn\">上一页</a>"; } else { tmp += ""; } tmp += "<a class=\"g-btn\">1</a>"; if (totalpage > configs.showPageCount + 1) { if (configs.PageIndex <= configs.showPageCount) { i = 2; j = i + configs.showPageCount; a = 1; } else if (configs.PageIndex > totalpage - configs.showPageCount) { i = totalpage - configs.showPageCount; j = totalpage; b = 1; } else { var k = parseInt((configs.showPageCount - 1) / 2); i = configs.PageIndex - k; j = configs.PageIndex + k + 1; a = 1; b = 1; if ((configs.showPageCount - 1) % 2) { i -= 1 } } } else { i = 2; j = totalpage; } if (b) { tmp += "..."; } for (; i < j; i++) { tmp += "<a class=\"g-btn\">" + i + "</a>"; } if (a) { tmp += " ... "; } if (totalpage > 1) { tmp += "<a class=\"g-btn\">" + totalpage + "</a>"; } if (configs.PageIndex < totalpage) { tmp += "<a title=\"下一页\" class=\"g-btn g-mr-10\">下一页</a>"; } else { tmp += ""; } tmp += "<span class=\"g-c-99\">到第</span><a>Go</a>"; tmp += "<input type=\"text\" maxlength=\"3\" class=\"g-input-text g-mlr-5 g-w-35 g-ta-c\" />"; tmp += "<span class=\"g-c-99\">页</span>"; tmp += "<a title=\"确定\" class=\"g-btn g-ml-10\">确定</a></span>"; tmp += "<input type=\"submit\" value=\"确定\" style=\"display:none;\" /></p>"; var pager = this.html(tmp) var index = pager.children().children('input')[0] pager.children().children('a').click(function() { var cls = $(this).attr('class'); var page = $(this).text(); if ( page == '上一页') { configs.onPageClick(configs.PageIndex - 2) } else if (page == '下一页') { configs.onPageClick(configs.PageIndex) } else if (page == '确定') { if (!isNaN(index.value)) { var indexvalue = parseInt(index.value); indexvalue = indexvalue < 1 ? 1 : indexvalue indexvalue = indexvalue > totalpage ? totalpage : indexvalue configs.onPageClick(indexvalue - 1) } } else { if (cls != 'g-btn-cur') { configs.onPageClick(parseInt(page) - 1) } } }).each(function() { var page = $(this).text(); configs.PageIndex == parseInt(page) && $(this).addClass('g-btn-cur'); /*if (configs.PageIndex == parseInt(page)) { $(this).addClass('g-btn-cur') } */ }) }
- 页码js,支持ajax无刷新翻页
- Jquery, Ajax无刷新翻页,支持跳转页面
- jquery+ajax无刷新翻页
- jquery ajax无刷新翻页 分页
- PHP Ajax 页面无刷新 翻页
- ajax无翻页刷新简单实例2
- jquery实现ajax无刷新分页页码控件
- 无刷新ajax调用js
- js+ajax 无刷新分页
- js+ajax 无刷新分页
- Java数据采集-7.Ajax无刷新请求(翻页-3)
- jquery 无刷新翻页
- jquery无刷新翻页,无翻页效果
- ajax静态页面无刷新添加留言,无刷新分页,翻页综合应用
- ajax静态页面无刷新添加留言,无刷新分页,翻页综合应用
- ajax(三)之省市二级菜单联动(从sql获取数据),无刷新翻页
- ICallbackEventHandler实现的无刷新翻页组件
- 无刷新效果的翻页功能
- JavaFX中的ObservableValue类型
- 敏捷在业界成功了吗?
- 如何在关闭vim文件后,屏幕上还显示之前文件的内容
- python中的sum函数.sum(axis=1)
- Hdu 4305 Lightning - 生成树计数 - 行列式求值
- 页码js,支持ajax无刷新翻页
- -all_load -force_load -ObjC
- glPolygonOffset的用法
- java RMI原理解析
- OCP-1Z0-053-V13.02-443题
- Apache的rewrite规则详细介绍
- hdu 1425 sort
- C++深入体验之旅一:C++概述
- 中国天气网接口返回json格式分析及接口(XML、图片接口)说明!