`
猪↘專屬|华
  • 浏览: 164020 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

利用jquery分页

jQueryStrutsJavaScriptApacheBean 
阅读更多

数据量大，就得有分页，我以前做的分页大部分都是用一个java分页器来实现的，今天晚上，做了一个用juery的分页器....

首先：随便建立一个jsp页面，导入jquery的库，然后写一些模拟的数据，就可以勒，下面是我做的分页小例：

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
        li{
                cursor:pointer
        }
</style>
<script type="text/javascript">
$( function(){
        var currentPage = 1, pageSize = 10;
        var recordCount = $( 'tbody>tr', $( 'table' ) ).length;
        var pageCount = Math.ceil( recordCount / pageSize );
       
        function showPage( $page ){
                $( 'tbody', $( 'table' ) ).find( 'tr' ).show()
                                                                .filter( ':gt('+ ( $page * pageSize - 1 ) +')' ).hide().end()
                                                                .filter( ':lt('+ ( ( $page - 1 ) * pageSize ) +')' ).hide().end();
                $( '#msg' ).html( '共'+recordCount+'条记录, 当前第'+$page+'/'+pageCount+'页, 每页'+pageSize+'条记录' );
        }
        showPage( currentPage );
        $( 'ul>li', $( '#button' ) ).each( function(){
                var $current = $( this );
                switch( $current.parent().children().index( $current ) ){
                        case 0:
                                        $current.bind( 'click', function(){
                                                currentPage = 1;
                                                showPage( currentPage );
                                        } );
                                break;
                        case 1:
                                        $current.bind( 'click', function(){
                                                currentPage = currentPage > 1 ? ( currentPage - 1 ) : currentPage ;
                                                showPage( currentPage );
                                        } );
                                break;
                        case 2:
                                        $current.bind( 'click', function(){
                                                currentPage = currentPage < pageCount ? ( currentPage + 1 ) : currentPage ;
                                                showPage( currentPage );
                                        } );
                                break;
                        case 3:
                                        $current.bind( 'click', function(){
                                        currentPage = pageCount;
                                                showPage( currentPage );
                                        } );
                                break;
                }
        } );
       
        $( 'span :input:button', $( '#button' ) ).unbind( 'click' ).bind( 'click', function(){
                var num = parseInt( $( 'span :input:text', $( '#button' ) ).val() );
                if( isNaN( num ) || num < 1 ){
                        num = 1;
                }else if( num > pageCount ){
                        num = pageCount;
                }
                showPage( num );
        } );
        //alert( pageCount );
} );
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<table width="200" border="1">
        <thead>
        <tr>
            <td>数据 1</td>
            <td>数据 2</td>
            <td>数据 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>9</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
        <tr>
            <td>9</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
  </tbody>
</table>
<div id="msg"></div>
<div id="button">
        <ul>
            <li>首页</li>
        <li>上一页</li>
        <li>下一页</li>
        <li>末页</li>
    </ul>
    <span>
            <input type="text" />
        <input type="button" value="跳转" />
    </span>
</div>

分享到：
评论
发表评论

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

相关推荐

    jQuery分页插件结合CSS3实现个性分页代码特效

    总结来说，这个项目教你如何利用jQuery分页插件和CSS3的特性，创建一个既实用又具有个性化的分页效果。通过学习和实践，你可以提高网页开发技能，更好地服务于用户体验，同时也能在实际项目中应用这些知识，提升网站...

    jQuery分页插件 很实用

    jQuery 分页插件是网页开发中的重要工具，它能够帮助...总结起来，jQuery分页插件是网页开发中的利器，通过合理利用它可以提升用户体验，降低服务器负载。通过深入学习和实践，你可以创建出既实用又美观的分页效果。

    jQuery分页插件（实例详尽，简单易用

    jQuery分页插件主要是通过JavaScript和CSS来实现的，它利用jQuery库的强大功能，动态生成分页链接，并根据用户点击的页码加载相应的内容。核心原理包括以下几个步骤： 1. 数据处理：首先，你需要将所有数据加载到...

    jQuery分页

    jQuery分页的核心原理在于利用AJAX（异步JavaScript和XML）技术，通过动态加载内容来实现页面的无刷新跳转。当用户点击分页按钮时，发送一个AJAX请求到服务器，服务器根据请求的页码返回对应的数据，然后前端使用...

    jquery分页

    jQuery 分页是网页开发中常用的一种技术，用于在大量数据中实现高效的导航，避免一次性加载过多内容导致页面...通过了解其工作原理和配置选项，开发者可以更好地利用jQuery分页插件，打造高效且用户友好的网页应用。

    自己写的jQuery分页根据json分页

    jQuery分页则是利用jQuery的功能来处理网页中的数据分块显示，通常与服务器端的接口配合，通过Ajax请求获取JSON格式的数据，以实现动态加载和切换页面。 JSON（JavaScript Object Notation）是一种轻量级的数据交换...

    .net 类的JQuery分页.net 类的JQuery分页

    总的来说，这个项目展示了如何在.NET环境中利用jQuery实现客户端分页，并通过自定义的服务器端处理程序（Handler）和后台代码处理分页请求，有效地分发和加载数据。同时，配置文件、HTML页面、CSS样式和JavaScript...

    基于Bootstrap的Jquery分页

    这时，我们可以利用jQuery的插件，如`bootstrap-paginator.js`或`jquery.twbsPagination.js`，这些插件扩展了Bootstrap的分页功能，提供了更多的配置选项和回调函数。 3. **配置与使用**：使用jQuery分页插件时，...

    jquery分页控件

    然后，利用jQuery分页插件提供的初始化方法设置分页控件，例如： ```javascript $("#pagination").pagination({ items: 总条数, itemsOnPage: 每页显示条数, displayPrevNext: true, displayFirstLast: true, ...

    jQuery分页插件jPagination 超实用

    jQuery分页插件jPagination是Web开发中一个非常实用的工具，它可以帮助开发者轻松地在大量数据中实现分页功能，提升用户体验。jPagination利用了jQuery的强大功能，以简洁的API设计，使得分页功能的集成变得简单易行...

    jquery分页例子

    只需要在页面中添加对应的HTML结构，然后利用jQuery来控制分页状态。 ```html &lt;ul class="pagination"&gt;&lt;/ul&gt; var currentPage = 1; updatePagination(currentPage); // 更新分页 function updatePagination...

    demo jquery分页

    3. **编写JavaScript代码**：利用jQuery，我们可以方便地操作DOM元素和处理用户事件。下面是一个简单的分页插件示例，假设我们已经有了数据数组`items`和每页显示的数量`perPage`： ```javascript function ...

    JS+Jquery分页插件

    总结来说，JS+jQuery分页插件通过利用jQuery库的强大功能，结合CSS样式表，可以轻松实现网页的高效分页功能，提高用户在浏览大量数据时的体验。对于前端开发者而言，理解并掌握这种插件的使用和实现原理，有助于提升...

    JQuery分页插件

    在网页开发中，数据展示是不可或缺的一环，尤其是在大数据量的情况下。JQuery分页插件是一种高效的解决...在实际项目中，合理利用JQuery分页插件，结合前端框架和后端API，可以构建出高效且用户友好的数据展示页面。

    jQuery分页动态数据表格插件.zip

    总的来说，"jQuery分页动态数据表格插件.zip"是一个用于构建高效、交互性强的Web数据展示工具，它利用jQuery的强大功能，结合Ajax和CSS，实现了数据的动态加载、分页显示以及丰富的用户交互。开发者可以根据自身需求...

    jQuery分页，纯AJAX分页

    jquery无刷新分页、排序 利用jquery实现的ajax无刷新分页以及排序，支持多种格式无刷新更换，数据库采用的是Sql2000自带的NorthWind数据库 数据库控制使用的是SqlHelper

    Jquery Ajax分页（有实例）

    - **编写JavaScript逻辑**：利用jQuery监听分页按钮的点击事件，当用户点击时触发AJAX请求。 - **发送AJAX请求**：使用`$.ajax()`函数，设置URL（指向获取数据的接口）、类型（GET或POST）、数据（如果需要的话，...

    jQuery 分页 滑动分页

    综上所述，这个jQuery分页资源提供了一套完整的解决方案，包含了实现分页所需的所有元素。通过学习和理解这些技术，开发者可以轻松地在自己的项目中实现高效的滑动分页功能，提升网页的交互性和实用性。

    asp.net mvc基于jquery分页

    在本篇内容中，我们将深入探讨如何利用jQuery在ASP.NET MVC项目中实现动态、美观且自定义的分页功能。 首先，我们需要了解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、...

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