JavaScript显示分页按钮
/**
* 获取分页按钮
* @param total_page 总页数
* @param current_page 当前页
* @param num 每页显示多少个分页按钮
* @returns {String}
*/
function get_page_html(total_page,current_page,num){ var page_html = "";
if(isNaN(total_page) && isNaN(current_page)){ }else{
//范围判断
if(current_page>total_page) {
current_page = total_page;
} // 当前页的前后各显示多少页
var count = Math.floor(num/2); // 当前页后面要显示的页数
var after_count = count;
if(count-current_page>0){
after_count += (count-current_page);
}
if(total_page<=1) {
//只有一页
page_html += '<ul class="pagination">';
page_html += '<li class="active"><a href="javascript:pageQuery(1)">1</a></li>';
page_html += '</ul>';
}else if(total_page<=num){
page_html += '<ul class="pagination">';
//把页数全部显示出来
for(var i=1;i<=total_page;i++) {
if(current_page==i){
page_html += '<li class="active"><a href="javascript:pageQuery('+current_page+')">'+current_page+'</a></li>';
}else{
page_html += '<li><a href="javascript:pageQuery('+i+')">'+i+'</a></li>';
}
}
page_html += '</ul>';
}else {
page_html += '<ul class="pagination">'; //显示前一页按钮
if(current_page-count>1) {
page_html += '<li><a href="javascript:pageQuery('+(current_page-1)+')">«</a></li>';
}
//显示当前页前面的页码按钮
for(var i=count;i>=1;i--) {
if(current_page-i>0){
page_html += '<li><a href="javascript:pageQuery('+(current_page-i)+')">'+(current_page-i)+'</a></li>';
}
} // 当前页按钮
page_html += '<li class="active"><a href="javascript:pageQuery('+current_page+')">'+current_page+'</a></li>'; // 显示当前页后面的页码按钮
for(var j=1;j<=after_count;j++){
if((current_page+j)<=total_page){
page_html += '<li><a href="javascript:pageQuery('+(current_page+j)+')">'+(current_page+j)+'</a></li>';
}
} //显示后一页按钮
if(current_page+count<total_page){
page_html += '<li><a href="javascript:pageQuery('+(current_page+1)+')">»</a></li>';
}
page_html += '</ul>';
}
}
return page_html;
}
效果



JavaScript显示分页按钮的更多相关文章
- JqGrid分页按钮图标不显示的bug
		
开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...
 - JavaScript点击按钮显示   确认对话框
		
//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
 - 仿淘宝分页按钮效果简单美观易使用的JS分页控件
		
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
 - 这两天自己模仿写的一个Asp.Net的显示分页方法 附加实体转换和存储过程
		
之前自己一直用Aspnetpager控件来显示项目中的分页,但是每次都要拖一个aspnetpager的控件进去,感觉很不舒服,因为现在自己写的webform都不用服务器控件了,所以自己仿照aspnet ...
 - 使用JavaScript实现分页效果
		
应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手. 首先页面结构如下,分别展示数据跟分页: <!DOCTYPE h ...
 - javascript同步分页
		
目前网上分页的例子比较多,但是对其原理不是很了解,平时用的时候只是拿来调用,今天花了点时间,采用面向对象方式写了一个demo.对其方法做了封装,对外只提供一个调用接口. window.loadPage ...
 - SSM_CRUD新手练习(9)显示分页数据
		
我们已经做好了用来显示数据的分页模板,现在只需要将我们从后台取出的数据填充好,显示出来. 我们使用<c:forEach>标签循环取出数据,所以需要先导入JSTL标签库 <%@ tag ...
 - Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页
		
Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页 在FireMonkey iOS应用程序中的Tab Tab由FMX.TabControl.TTabControl定 ...
 - jquery判断滚动到某个div显示底部按钮
		
判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
 
随机推荐
- android 如何让文本中某个关键字高亮显示?
			
TextView tv = (TextView) findViewById(R.id.hello);SpannableString s = new SpannableString(getResourc ...
 - Python教程:[69]strip()函数详解
			
strip()用于裁剪字符串首尾的某些字符,是一个用处非常多的函数,今天我们来通过例子来探讨一下它的基本用法: 假如有一个这样的字符串 strip()不带任何参数,可以删除首位的空格 但是strip( ...
 - Javascript 图片左右滑动与切换
			
Html代码 : <div class="v_out v_out_p"> <div class="prev"> <a href=& ...
 - 【linux】如何查看和解压缩rpm文件内容
			
查看rpm文件中的内容 http://www.cyberciti.biz/faq/howto-list-find-files-in-rpm-package/ Use following syntax ...
 - Python 定制类与其对象的创建和应用
			
1.创建新类Athlete,创建两个唯一的对象实例sarah james,他们会继承Athlete类的特性 >>> class Athlete: def __init__(self, ...
 - android学习笔记42——图形图像处理2——绘图
			
绘图 android的绘图应该继承View组件,并重写onDraw(Canvas canvas)方法即可. 重写onDraw(Canvas canvas)方法时涉及一个绘图API:Canvas,Can ...
 - iphone dev 入门实例1:Use Storyboards to Build Table View
			
http://www.appcoda.com/use-storyboards-to-build-navigation-controller-and-table-view/ Creating Navig ...
 - (PowerShell) Managing Windows Registry
			
http://powershell.com/cs/blogs/ebookv2/archive/2012/03/23/chapter-16-managing-windows-registry.aspx
 - POJ 1185 炮兵阵地(状态压缩DP)
			
题解:nState为状态数,state数组为可能的状态 代码: #include <map> #include <set> #include <list> #inc ...
 - DB2 SQL性能调优秘笈
			
SQL优化技巧 1.去除在谓词列上编写的任何标量函数 2.去除在谓词列上编写的任何数学运算 3.SQL语句的Select部分只写必要的列 4.尽可能不用Distinct 5.尽量将In子查询重写为Ex ...