`

js 实现客户端无刷新分页效果

    博客分类：
  • JS
htmljavascripttablejs 
阅读更多
[/size]问题：

实现如下功能需求



1.table 按行数 分页

2.js 实现客户端无刷新效果

3.分页脚注 比较美观

4.可扩展 维护性比较好



Html代码  收藏代码

    <span style="font-size: x-small;"><html version="-//W3C//DTD HTML 4.01 Transitional//EN"> 
     
        <head> 
            <style type="text/css">     
                .pg-normal { 
                    color: black; 
                    font-weight: normal; 
                    text-decoration: none;     
                    cursor: pointer;     
                } 
                .pg-selected { 
                    color: black; 
                    font-weight: bold;         
                    text-decoration: underline; 
                    cursor: pointer; 
                } 
            </style> 
             
            <script type="text/javascript" src="paging.js"></script> 
        </head> 
         
        <body> 
            <form action="" method="get" enctype="application/x-www-form-urlencoded"> 
            <table id="results"> 
                <tr> 
                    <th>#</th> 
                    <th>field</th> 
                </tr> 
                <tr> 
                    <td>1</td> 
                    <td><input type="text" name="field-name" value="rec1"></td> 
                </tr> 
                <tr> 
                    <td>2</td> 
                    <td><input type="text" name="field-name" value="rec2"></td> 
                </tr> 
                <tr> 
                    <td>3</td> 
                    <td><input type="text" name="field-name" value="rec3"></td> 
                </tr> 
                <tr> 
                    <td>4</td> 
                    <td><input type="text" name="field-name" value="rec4"></td> 
                </tr> 
                <tr> 
                    <td>5</td> 
                    <td><input type="text" name="field-name" value="rec5"></td> 
                </tr> 
                <tr> 
                    <td>6</td> 
                    <td><input type="text" name="field-name" value="rec6"></td> 
                </tr> 
                <tr> 
                    <td>7</td> 
                    <td><input type="text" name="field-name" value="rec7"></td> 
                </tr> 
                <tr> 
                    <td>8</td> 
                    <td><input type="text" name="field-name" value="rec8"></td> 
                </tr> 
                <tr> 
                    <td>9</td> 
                    <td><input type="text" name="field-name" value="rec9"></td> 
                </tr> 
                <tr> 
                    <td>10</td> 
                    <td><input type="text" name="field-name" value="rec10"></td> 
                </tr> 
            </table> 
            <div id="pageNavPosition"></div> 
            <div><input type="submit" onclick="alert('Hey, this is just a sample!'); return false;" />&nbsp;<input type="reset" /></div> 
        </form> 
         
        <script type="text/javascript"><!-- 
            var pager = new Pager('results', 3);  
            pager.init();  
            pager.showPageNav('pager', 'pageNavPosition');  
            pager.showPage(1); 
        //--></script> 
         
        </body> 
    </html> 
    </span> 


Html代码  收藏代码

    <span style="font-size: x-small;">function Pager(tableName, itemsPerPage) { 
        this.tableName = tableName; 
        this.itemsPerPage = itemsPerPage; 
        this.currentPage = 1; 
        this.pages = 0; 
        this.inited = false; 
         
        this.showRecords = function(from, to) {         
            var rows = document.getElementById(tableName).rows; 
            // i starts from 1 to skip table header row 
            for (var i = 1; i < rows.length; i++) { 
                if (i < from || i > to)   
                    rows[i].style.display = 'none'; 
                else 
                    rows[i].style.display = ''; 
            } 
        } 
         
        this.showPage = function(pageNumber) { 
            if (! this.inited) { 
                alert("not inited"); 
                return; 
            } 
     
            var oldPageAnchor = document.getElementById('pg'+this.currentPage); 
            oldPageAnchor.className = 'pg-normal'; 
             
            this.currentPage = pageNumber; 
            var newPageAnchor = document.getElementById('pg'+this.currentPage); 
            newPageAnchor.className = 'pg-selected'; 
             
            var from = (pageNumber - 1) * itemsPerPage + 1; 
            var to = from + itemsPerPage - 1; 
            this.showRecords(from, to); 
        }    
         
        this.prev = function() { 
            if (this.currentPage > 1) 
                this.showPage(this.currentPage - 1); 
        } 
         
        this.next = function() { 
            if (this.currentPage < this.pages) { 
                this.showPage(this.currentPage + 1); 
            } 
        }                         
         
        this.init = function() { 
            var rows = document.getElementById(tableName).rows; 
            var records = (rows.length - 1);  
            this.pages = Math.ceil(records / itemsPerPage); 
            this.inited = true; 
        } 
     
        this.showPageNav = function(pagerName, positionId) { 
            if (! this.inited) { 
                alert("not inited"); 
                return; 
            } 
            var element = document.getElementById(positionId); 
             
            var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> &#171 Prev </span> | '; 
            for (var page = 1; page <= this.pages; page++)  
                pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | '; 
            pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next &#187;</span>';             
             
            element.innerHTML = pagerHtml; 
        } 
    } 
     
    </span> 



如果要实现美观效果 可自己加入css

实例扩展如下



相应css代码


Html代码  收藏代码

    #pageNavPosition{ 
        margin: 20px 0 0; 
        padding: 3px; 
        text-align: center; 
    } 
    .pg-normal { 
        border: 1px solid #DDDDDD; 
        cursor:pointer; 
        color: #61AF3F; 
        margin-left: 2px; 
        padding: 2px 5px; 
        text-decoration: none; 
    } 
    .pg-selected { 
        background-color: #A1D888; 
        border: 1px solid #B2E05D; 
        color: #638425; 
        padding: 2px 5px; 
        cursor:pointer; 
    } 
分享到：
| jsp乱码解决
评论
发表评论

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

相关推荐

    js实现无刷新分页

    3. **服务器端渲染 (SSR)**：虽然主要讨论的是客户端分页，但服务器端渲染也可以实现无刷新分页，例如 Next.js 在 React 中的预渲染功能。 总之，JavaScript 无刷新分页提供了更好的用户体验，同时对开发者提出了更...

    无刷新页面分页效果实现（修改调整版）

    在你提到的"无刷新分页（修改）"源码中，很可能包含了以上步骤的具体实现，包括HTML结构、JavaScript代码、Ajax请求和可能的状态管理部分。由于没有具体的源码内容，无法详细解析代码实现细节，但你可以根据上述步骤...

    thinkphp+ajax无刷新分页

    下面将深入探讨如何在ThinkPHP框架中使用AJAX实现无刷新分页。 #### 一、ThinkPHP框架简介 ThinkPHP是一个开源的PHP框架，遵循MVC（Model-View-Controller）架构模式，旨在提高开发效率和代码可维护性。它提供了...

    mvc无刷新分页

    3. **MVC中的无刷新分页实现** - **Controller层**：Controller接收到前端Ajax请求后，根据请求参数（如当前页码、每页数量等）处理分页逻辑，调用Model获取对应数据。 - **Model层**：Model根据Controller传入的...

    无刷新分页技术

    在实际应用中，JavaScript库如jQuery、Vue.js或React.js等提供了更高级别的抽象，简化了Ajax操作和DOM（Document Object Model）操作，使得实现无刷新分页更加便捷。例如，使用jQuery的$.ajax或$.getJSON方法，可以...

    利用Ajax实现无刷新分页

    **Ajax 实现无刷新分页技术详解** 在Web开发中，提供大量的数据通常需要分页显示，以提高用户体验和加载速度。传统的分页方式需要用户每次点击分页按钮时整个页面重新加载，而Ajax（Asynchronous JavaScript and ...

    SSH+Mysql无刷新分页实例

    在这个"SSH+Mysql无刷新分页实例"中，我们将探讨如何利用SSH框架与MySQL数据库实现网页的无刷新分页功能，从而提高用户体验。 首先，SSH框架中的Spring负责控制层，它提供依赖注入（Dependency Injection，DI）和...

    js分页示例,前台分页，客户端分页，分页机制，js分页

    **JavaScript分页实现**，通常涉及到以下步骤： 1. **初始化**：设置每页显示的条目数、总数据量等参数。 2. **创建分页元素**：在HTML中添加页码和导航按钮。 3. **绑定事件**：为分页元素添加点击事件监听器。 4. ...

    ajax无刷新分页

    **二、无刷新分页实现** 1. **前端组件**: 使用JavaScript或者基于JavaScript的库（如jQuery，Vue，React等）创建前端分页组件，用于显示分页链接或按钮，并处理用户点击事件。 2. **发送请求**: 当用户点击分页...

    ASP+ajax 实现无刷新分页效果

    在本场景中，ASP与Ajax（Asynchronous JavaScript and XML）结合，旨在创建交互性更强、用户体验更好的Web应用，特别是在分页显示大量数据时，通过无刷新技术提升用户体验。 Ajax的核心在于无需整个页面刷新，只需...

    利用jquery实现的ajax无刷新分页以及排序，支持多种格式无刷新更换

    总结，本项目通过jQuery和AJAX实现了无刷新分页和排序功能，提升了用户体验。同时，通过支持多种数据格式，使得数据交换更具灵活性。项目的代码组织和配置文件揭示了ASP.NET Web应用的基本架构和工作流程。通过深入...

    dwr框架实现无刷新分页

    **二、无刷新分页实现原理** 1. **前端页面构建**： - 使用HTML和JavaScript构建分页界面，包括页码按钮和数据显示区域。 - 引入DWR的JavaScript库，创建用于与后台交互的JavaScript对象。 2. **DWR配置**： - ...

    JS与ASHX实现无刷新分页

    "JS与ASHX实现无刷新分页"这个主题就是关于如何利用JavaScript（JS）和ASP.NET的HTTP处理程序（ASHX）来创建这种功能。无刷新分页能让用户在浏览大量数据时，无需等待整个页面重新加载，只需点击或滑动即可切换到...

    AJAX无刷新分页（适合网页开发者）

    总的来说，AJAX无刷新分页技术是通过结合客户端的JavaScript和服务器端的脚本实现的，允许网页在不重新加载的情况下动态更新内容。通过理解并掌握这一技术，网页开发者可以创建更流畅、更高效的用户界面，提高用户...

    Asp.net+Sql+ashx实现 jquery无刷新分页

    在实现无刷新分页时，我们可以利用jQuery的Ajax方法向服务器发送异步请求，获取新的分页数据，然后动态更新页面上的表格或列表，从而达到无刷新的效果。具体步骤如下： 1. 用户点击分页按钮。 2. jQuery监听到事件...

    jquery+json实现页面无刷新分页

    实现页面无刷新分页的步骤如下： 1. **HTML结构**：在页面上设置好分页的基础结构，例如页码按钮和内容区域。这些元素可以通过jQuery进行选择和操作。 2. **初始化分页**：利用jQuery获取初始分页配置，如每页显示...

    Mvc无刷新分页

    在本文中，我们将深入探讨如何在ASP.NET MVC框架中实现无刷新分页。无刷新分页是一种提升用户体验的技术，它允许用户在不重新加载整个页面的情况下查看不同页面的内容。这通常通过Ajax技术来实现，使得网页更加动态...

    jquery 无刷新分页排序

    1. **JavaScript文件**：用于实现jQuery无刷新分页和排序的核心逻辑，可能包括监听用户事件、发起Ajax请求、处理返回数据和更新页面等功能。 2. **CSS文件**：用于美化分页和排序的样式，如分页按钮、排序图标等。 3...

    jsp分页，包括页面刷新和无刷新

    本教程将重点讲解如何在JSP（JavaServer Pages）中实现分页，包括页面刷新分页和无刷新分页，同时会涉及到MySQL数据库的使用以及Eclipse开发环境。 一、页面刷新分页 页面刷新分页是最传统的分页方法，当用户点击...

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