/**
* 获取分页按钮
* @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)+')">&laquo;</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)+')">&raquo;</a></li>';
}
page_html += '</ul>';
}
}
return page_html;
}

效果

JavaScript显示分页按钮的更多相关文章

  1. JqGrid分页按钮图标不显示的bug

    开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...

  2. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  3. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  4. 这两天自己模仿写的一个Asp.Net的显示分页方法 附加实体转换和存储过程

    之前自己一直用Aspnetpager控件来显示项目中的分页,但是每次都要拖一个aspnetpager的控件进去,感觉很不舒服,因为现在自己写的webform都不用服务器控件了,所以自己仿照aspnet ...

  5. 使用JavaScript实现分页效果

    应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手. 首先页面结构如下,分别展示数据跟分页: <!DOCTYPE h ...

  6. javascript同步分页

    目前网上分页的例子比较多,但是对其原理不是很了解,平时用的时候只是拿来调用,今天花了点时间,采用面向对象方式写了一个demo.对其方法做了封装,对外只提供一个调用接口. window.loadPage ...

  7. SSM_CRUD新手练习(9)显示分页数据

    我们已经做好了用来显示数据的分页模板,现在只需要将我们从后台取出的数据填充好,显示出来. 我们使用<c:forEach>标签循环取出数据,所以需要先导入JSTL标签库 <%@ tag ...

  8. Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页

    Delphi for iOS开发指南(8):在iOS应用程序中使用Tab组件来显示分页 在FireMonkey iOS应用程序中的Tab Tab由FMX.TabControl.TTabControl定 ...

  9. jquery判断滚动到某个div显示底部按钮

    判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

随机推荐

  1. 车载凯立德导航地图更新以及DSA数据更新方法

    每年升级每次都去重新摸索,1年时间忘完了,遂决定把他写下来,我这就去实验,实验好了来补 第一步: 找最新的凯立德软件和地图版本号 方法:淘宝搜索, 例如:凯立德 2016,搜索结果会出现比如2016 ...

  2. Redis持久化机制和恢复机制

    Redis持久化方式有两种: (1)RDB 对内存中数据库状态进行快照 (2)AOF 把每条写命令都写入文件,类似mysql的binlog日志 RDB 将Redis在内存中的数据库状态保存到磁盘里面, ...

  3. 剑指offer系列54---数组中出现次数超过一半的数

    [题目]数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. * 例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}. * 由于数字2在数组中出现了5次,超过数组长度的一半,因 ...

  4. 【Hadoop需要的Jar包】Hadoop编程-pom.xml文件

    JDK版本的要求 Hadoop 2.7 以及之后的版本,需要JDK 7: Hadoop 2.6 以及之前的版本,支持JDK 6: 对于Hadoop1.x.x版本,只需要引入1个jar: hadoop- ...

  5. Linux Modules Introduction

    Modules are small kernel extensions ,that may be loaded and unloaded at will● Can implement drivers, ...

  6. 【转】c# winform DataGridView导出数据到Excel中,可以导出当前页和全部数据

    准备工作就是可以分页的DataGridView,和两个按钮,一个用来导出当前页数据到Excel,一个用来导出全部数据到Excel 没有使用SaveFileDialog,但却可以弹出保存对话框来 先做导 ...

  7. MySQL命名、设计及使用规范--------来自标点符的《MySQL命名、设计及使用规范》

    原文地址:http://www.biaodianfu.com/mysql-best-practices.html 最近在看MySQL相关的内容,整理如下规范,作为一名刚刚学习MySQL的菜鸟,整理的内 ...

  8. OkHttp 源码分析

    在工作中用到封装HTTP传输的OkHTTP,OkHttp是相对成熟的解决方案,同时也是开源项目.本文将从源码角度看下OkHttp是如何实现一些网络操作的. HTTP GET: OkHttpClient ...

  9. SOA_环境安装系列4_Oracle SOA安装和环境搭建(案例)

    2015-01-02 Created By BaoXinjian

  10. DBA_Oracle性能优化的基本方法概述(方法论)

    2014-12-18 Created By BaoXinjian