`

一个分页控件，适合大数据量。可以替换ext的分页控件

    博客分类：
  • JAVA
EXTJavaScriptAjaxXHTMLCSS 
阅读更多

<!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" lang="gb2312">
<head>
<title>JS静态分页程序</title>
</head>
<style type="text/css">
a:link,a:visited,a:hover,.current,#info{
    border:1px solid #DDD;
    background:#F2F2F2;
    display:inline-block;
    margin:1px;
    text-decoration:none;
    font-size:12px;
    width:15px;
    height:15px;
    text-align:center;
    line-height:15px;
    color:#AAA;
    padding:1px 2px;
}
a:hover{
    border:1px solid #E5E5E5;
    background:#F9F9F9;
}
.current{
    border:1px solid #83E7E4;
    background:#DFF9F8;
    margin:1px;
    color:#27CBC7;
}
#info{
    width:auto;
}
</style>
<body>
<div id="setpage"></div>
<script type="text/javascript">
<!--
var totalpage,pagesize,cpage,count,curcount,outstr;
//初始化
cpage = 1;
totalpage = 56;
pagesize = 10;
outstr = "";
function gotopage(target)
{    
    cpage = target;        //把页面计数定位到第几页
    setpage();
    //reloadpage(target);    //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}
function setpage()
{
    if(totalpage<=10){        //总页数小于十页
        for (count=1;count<=totalpage;count++)
        {    if(count!=cpage)
            {
                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
            }else{
                outstr = outstr + "<span class='current' >"+count+"</span>";
            }
        }
    }
    if(totalpage>10){        //总页数大于十页
        if(parseInt((cpage-1)/10) == 0)
        {            
            for (count=1;count<=10;count++)
            {    if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
            }
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
        }
        else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
        {    
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
            for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
            {    if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
            }
        }
        else
        {    
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
            for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++)
            {        
                if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
            }
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
        }
    }    
    document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";
    outstr = "";
}
setpage();    //调用分页
//-->
</script>
</body>
</html>

详细出处参考：http://www.jb51.net/article/10414.htm

分享到：
| C++中的虚函数(virtual function)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extJs之分页控件

    总结来说，ExtJS中的分页控件是一个强大的功能，它可以帮助我们有效地管理和展示大量数据。"ux.Andrie.pPageSize"这样的自定义插件则为分页功能增加了更多灵活性，使得用户可以根据自身需求调整每页的记录数。通过...

    Ext扩展控件-------可以通过下拉列表框选择每页的分页条数

    在本例中，“ux.Andrie.pPageSize”可能是一个EXT社区成员Andrie开发的自定义分页大小选择器，它扩展了默认的EXT分页工具栏。 2. **分页工具栏（paging toolbar）**：EXT Grid的分页功能通常通过分页工具栏来实现，...

    EXT树表分页(SERVLET)

    5. **EXT分页控件**：EXT提供内置的分页工具栏（pagingToolbar），可以自动与Store关联，显示页码并处理分页事件。开发者只需在界面上添加这个控件，即可实现分页功能。 6. **AJAX通信**：EXT通过AJAX与服务器进行...

    Ext中对于多种store数据分页实现示例

    客户端分页适用于数据量不大，且可以一次性加载到内存中的场景，而服务器端分页则适合处理大数据量的情况，它通过与服务器交互仅加载当前页的数据。 1. **客户端分页（Client Paging）** 在客户端分页中，所有的...

    asp.net2.0 大数据量分页

    ### ASP.NET 2.0大数据量分页技术详解 #### 引言 在处理大量数据时，有效地分页浏览是提升用户体验与系统性能的关键因素之一。ASP.NET 2.0 提供了两种分页方式：默认分页和自定义分页。本文将深入探讨这两种方法，...

    ext3.0所有控件演示代码

    3. 分页工具栏（Paging Toolbar）：EXT3.0提供了一个便捷的分页工具栏，与数据网格配合使用，方便用户浏览大量数据。通过`Ext.PagingToolbar`创建分页工具栏，并将其与数据源关联，可以实现数据的分页加载和导航。 ...

    Ext.Net 服务器端分页 存储过程

    在Ext.NET中，当用户滚动数据网格或改变分页控件时，框架会发送一个请求到服务器，包含当前页数和每页记录数。服务器根据这些参数查询数据库，仅返回所需的数据块，然后将这些数据渲染到客户端的网格中。这样可以...

    分页EXT分页EXT

    EXTJS是一个基于JavaScript的UI框架，它使用MVC（Model-View-Controller）设计模式，提供了一系列可重用的组件，如表格、表单、树形视图和分页控件等。EXTJS支持响应式设计，能够适应各种屏幕尺寸，为Web应用带来...

    Ext_Js分页显示案例详解

    2. **PagingToolbar组件**：`Ext.PagingToolbar`是一个用于分页操作的工具栏组件，它可以与Store进行绑定，实现数据的分页加载。 3. **远程分页**：在Ext_Js中，通常采用远程分页的方式，即数据的分页逻辑发生在...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    ExtJS 是一个流行的JavaScript库，用于构建富客户端应用程序。它提供了丰富的组件模型，包括用于创建用户界面的各种控件。在本场景中，我们关注的是ExtJS中的分页查询功能。 在ExtJS中，分页查询通常涉及到数据网格...

    Ext 分页核心代码

    此外，还可以使用内存分页（客户端分页），即所有数据都存储在客户端，但只加载当前页数据到Grid，适用于数据量较小的情况。 8. **响应式分页** 在移动设备上，可能需要调整分页控件的布局和大小。利用Ext JS的...

    ext tree 分页

    通过设置`autoLoad`为`false`防止初始加载全部数据，然后设置`pageSize`定义每页加载的数据量。例如： ```javascript var store = Ext.create('Ext.data.TreeStore', { autoLoad: false, pageSize: 50, // 每页...

    Ext日期时间控件 Spinner控件 Ext代码 Extjs Grid

    当我们谈论`ExtJS Grid`时，我们指的是一个强大的数据展示组件，它可以显示大量结构化的数据，并提供排序、分页、过滤等功能。在`Grid`中集成日期时间控件和Spinner控件，可以使用户直接在表格单元格内进行日期和...

    一个table控件

    总结来说，"一个table控件"是一个强大的数据展示工具，它的功能丰富，可定制性强，类似于Ext JS的table控件。使用这样的控件，开发者能够轻松地在网页上创建功能完善的交互式表格，满足各种数据展示和管理的需求。而...

    ext grid网格控件实例

    EXT Grid控件是EXT JS库中的一个核心组件，它用于创建功能丰富的数据网格，能够高效地展示和操作大量数据。EXT Grid广泛应用于J2EE框架中，为Web应用提供了强大的数据展示和交互能力。在本实例中，我们将探讨四种...

    EXT 组件和控件的 视频教程

    EXT Grid是EXT JS中的一个关键组件，主要用于展示和操作表格数据。这个“EXT 组件和控件的 视频教程”很可能详细讲解了如何有效地使用EXT Grid以及相关组件。 在EXT Grid的使用中，数据通常是从服务器端获取并以...

    Ext表格获取后台数据

    Ext.grid.GridPanel是一个功能强大的表格控件，它可以显示大量数据，并且提供了许多自定义的选项，例如分页、排序、过滤等。 在ExtJS中，表格控件对性能的要求较高，特别是在显示大量数据时。如果不使用分页机制，...

    EXT2.0分页

    EXT2.0分页是网页开发中的一种常见技术，它主要应用于大数据量的展示场景，如搜索结果、用户列表或论坛帖子等。在EXT2.0框架中，分页功能是为了提高网页性能和用户体验而设计的。EXT2.0是一个基于JavaScript的富...

    js+ext超炫树形控件

    ExtJS 是一个流行的前端JavaScript框架，它提供了一系列丰富的组件，包括我们关注的树形控件。这种控件能够以节点和子节点的形式展现数据，非常适合用来表示层次结构的信息，如组织架构、文件系统或菜单。 1. **...

Magicbox
Global site tag (gtag.js) - Google Analytics