`
shaojiashuai123456
  • 浏览: 262662 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
社区版块
存档分类
最新评论

jquery table分页插件

jQueryCSSJavaScriptHTML 
阅读更多

使用方法：

（1）下载jquery.js，现在最新版本为1.3

（2）新建js，我的为page.js，放入以下代码。

jQuery.extend({
  page:function(divId,pagesize){ 
            var div=divId;
   var x="#"+div+" table tr:has(td)";
   var y="#"+div;
   var z="#"+div+" table";
      var table=$(x);          
   var row=table.length;
   var pageSize=pagesize;
   var allPage=parseInt(""+((row+pageSize-1)/pageSize),10);   
   var currentPage=1;
   $(table).hide();    
   var width=$(z).width();
   var max_number=parseInt((width-130)/20,10);
   //alert(max_number);
            //构建菜单   
   $(y).append("<div id='menu'></div>");
   $(y).css("width",$(z).width()+"px");   
   $("#menu").css("width",$(z).width()+"px");
   $("#menu").css("padding","2px 10px 2px 10px");
   $("#menu").css("position","absolute");
   
   showRow("1");
   bar();
   //为菜单添加事件      
   function bar(){
    var left;
    var right;
    if(max_number>=allPage){
     left=1;
     right=allPage;
    }
    else{
     var center=parseInt((max_number+1)/2,10);     
     if(currentPage<=center){
      left=1;
      right=max_number;
     }
     else{
      if(allPage%2==1){
       center=center-1;       
      }
      var maxRight=currentPage+center-1;
      if(maxRight>=allPage){
       left=allPage-max_number+1;
       right=allPage;
      }
      else{
       if(allPage%2==0){
           left=currentPage-center+1;
          }
       else left=currentPage-center;
       right=left+max_number-1;
      }
      
     }
    }
    $("#menu").empty();
    $("#menu").append("<span id='pre'>pre</span>");      //上一页
    for(var i=left;i<=right;i++){
     $("#menu").append("<span id='"+i+"'>"+i+"</span>");
     $("span").css("width","20px");
    }   
    $("#menu").append("<span id='next'>next</span>");   //下一页
    $("#menu").append("<span id='page_currentPage_allPage'></span>");
    $("#next").css("width","30px");
    $("#pre").css("width","30px"); 
    $("#page_currentPage_allPage").css("border","solid 1px green");
    $("#page_currentPage_allPage").css("width","30px");
    $("#page_currentPage_allPage").css("margin","0px 0px 0px 10px");
    $("#page_currentPage_allPage").css("padding","0px 2px 0px 2px");
    $("#page_currentPage_allPage").html(currentPage+"<b>/</b>"+allPage);
    $("span:not('#pre','#next','#page_currentPage_allPage')").bind("click",{}, function (){ showRow($(this).attr("id"));});
   $("span:not('#page_currentPage_allPage')").bind("mouseover",{}, function (){ $(this).css("cursor", "hand");});
   $("#pre").bind("click",{}, function (){ showPre();});
   $("#next").bind("click",{}, function (){ showNext();});
   }
   
   function showRow(page){
    currentPage=page-0;
    $(table).hide();  
    var first=(currentPage-1)*pageSize;
    var last=pageSize*currentPage;
    if(last>row) last=row;
    for(var i=first;i<last;i++){
     table.eq(i).show();
    }
    bar();
    var id="#"+currentPage;
    var cd="span:not("+id+")";
    $(cd).css("color","#000000");
    $(id).css("color","red");
    $("#page_currentPage_allPage").html(currentPage+"<b>/</b>"+allPage);
   }
   
   function showPre(){
    var p;
    if(currentPage-0==1){
     p=allPage;
    }
    else {
     p=currentPage-1;
    }
    showRow(p);
    
   }
   
   function showNext(){
    var p;
    if(currentPage==allPage){
     p=1;
    }
    else {
     p=currentPage+1;
    }
    showRow(p);
   }
   $("#1").css("color","red");   }
    });

 （3）

    使用方法很简单，页面引用这两个js文件。

    然后加入

 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="page.js"></script>
<script language="javascript">
$(document).ready(
  function (){
    jQuery.page("page",5);
  }
);
</script>

   jQuery.page("page",5);     为主要使用方法，其中参数“page”为围绕table的div层id，数字5为要每页要显示的输入数。

  （4）下面给出的是我的例子，省略（1）（2）。

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="page.js"></script>
<script language="javascript">
$(document).ready(
  function (){
    jQuery.page("page",5);
  }
);
</script>
<body>
<div id="page">
  <table width="280" border="1">
    <tr>
      <th width="80">id</th>
      <th width="184">name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>fds</td>
    </tr>
    <tr>
      <td>2</td>
      <td>fsdfsd</td>
    </tr>
    <tr>
      <td>3</td>
      <td>fsdfsd</td>
    </tr>
    <tr>
      <td>4</td>
      <td>fsdf</td>
    </tr>
    <tr>
      <td>5</td>
      <td>sdfds</td>
    </tr>
    <tr>
      <td>6</td>
      <td>fsdf</td>
    </tr>
    <tr>
      <td>7</td>
      <td>sdfsd</td>
    </tr>
    <tr>
      <td>8</td>
      <td>fsdf</td>
    </tr>
    <tr>
      <td>9</td>
      <td>sdfsd</td>
    </tr>
    <tr>
      <td>10</td>
      <td>fdsf</td>
    </tr>
  </table>
</div>
</body>
</html>

 

    效果图：

   

 

 

附有一个jquery API.

  • 大小: 2.8 KB
1
顶
0
踩
分享到：
| 注册验证的框架
评论
5 楼 gar_odie 2013-07-17  
挺好的，谢谢露珠
4 楼 a545807638 2013-04-22  
3 楼 peng520cai 2009-11-03  
1.第一条数据为什么每页都显示?
2.next按钮最后页时会翻到第一页?
2 楼 a06062125 2009-08-05  
tianya4420 写道
兄弟，你这个只适用用数据量较小的table，如果我的table有几千条怎么办呢？


把 
$(document).ready(   
  function (){   
   [b] jQuery.page("page",[color=red]5[/color]); [/b]  
  }   
);


中的 5 改成你想要的每页显示数就可以了，把你的表格放入一个  id=page 的层里
即： 

$(document).ready(   
  function (){   
   [b] jQuery.page("page",15); [/b]  /*每页显示15条记录*/
  }   
);   

<body>
   <div id="page">
      <table>
         <tr></tr>
         <c:forEach items="" var=" " varStatus="status">
              <tr >
                <td>${status.count }</td>
                ... ...
                <td></td>
              </tr>
         </c:forEach>
         
      </table>
   </div>
</body>


这样可以解决楼主的问题吗？
1 楼 tianya4420 2009-08-04  
兄弟，你这个只适用用数据量较小的table，如果我的table有几千条怎么办呢？
发表评论

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

相关推荐

    jQuery表格数据分页插件代码

    jQuery表格数据分页插件是一种高效且用户友好的方式，用于在网页上展示大量数据，尤其是在处理表格时。这些插件通常提供动态加载、自定义样式、数据过滤和排序等功能，使得网页上的表格数据管理更加方便。在这个...

    jquery table分页 非常好用

    首先，理解jQuery table分页的基本概念。表格分页是指将大量数据分成多个小块（通常每页显示固定数量的行），用户可以通过页码或导航按钮在这些数据块之间切换。这使得用户可以快速浏览和定位他们关心的信息，而无需...

    jQuery实现Table分页跳转

    3. **分页插件**：虽然可以手动实现分页逻辑，但为了提高效率和代码可维护性，推荐使用jQuery分页插件，如`jquery_pagination.js`。安装插件后，只需几行代码即可实现分页功能。 4. **配置分页**：在HTML结构中创建...

    简单的jquery前台分页插件paginathing.js

    Paginathing.js是基于jQuery的一款轻量级前端分页插件。这个插件专为那些希望在不依赖后端服务器处理的情况下，实现前端列表或表格数据分页的开发者设计。通过使用Paginathing.js，你可以轻松地将大量数据分成小块...

    jQuerytable分页

    以下是实现jQuery table分页的基本步骤： 1. **HTML结构**：创建一个包含表格数据的`&lt;table&gt;`元素，并确保每个数据都在`&lt;tr&gt;`元素中。此外，还需要为分页组件预留位置，例如`&lt;div id="pager"&gt;&lt;/div&gt;`。 2. **引入...

    jquery插件--表格分页

    二、jQuery表格分页插件 jQuery有多个插件用于实现表格分页，例如： 1. jQuery DataTables：这是一个强大的数据表插件，它提供了分页、排序、搜索和过滤等功能。DataTables支持自定义分页样式，同时提供了多种数据...

    jQuery基于Bootstrap分页插件.zip

    jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示，支持动态分页数据代码。  jQuery(document).ready(function($){ for (var i = 1; i ; i ) {  $('.list-group').append('...

    jquery 表格分页处理插件 DataTables

    DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。

    jQuery带分页动态数据表格插件

    本教程将深入讲解如何利用jQuery实现一个带分页的动态数据表格插件。 首先，我们需要理解jQuery的核心概念。jQuery通过提供易用的API，使得JavaScript代码更简洁、更高效。例如，`$(selector)`用于选取DOM元素，`....

    jQuery Bootstrap动态分页插件.zip

     jQuery(document).ready(function($){ for (var i = 1; i ; i ) {  $('.list-group').append('&lt;li class="list-group-item"&gt; Item ' i '&lt;/li&gt;'); } $('.list-group').paginathing({  perPage: 5,  ...

    Json Jquery 自动生成table的无刷新分页插件整合pagination

    `jquery.pagination.js`是jQuery分页插件的脚本，实现了分页的逻辑和界面渲染；而`hongtu-1.0.0.js`可能是另一个库或自定义的辅助脚本，可能包含特定的功能或者样式支持。 使用这些组件，开发者可以轻松地创建一个...

    bootstrap分页插件

    Bootstrap分页插件是一种基于流行的前端框架Bootstrap设计的页面导航工具，主要用于在大量数据或内容中实现分块显示，提供用户友好的翻页体验。在Web应用中，当需要展示的数据超过一个页面所能容纳的范围时，分页就...

    jQuery插件PagedTable实现表格分页

    jQuery插件PagedTable是一种广泛使用的前端解决方案，用于在网页上展示大量数据时实现表格的分页功能。这种插件可以极大地提升用户体验，因为它避免了一次性加载所有数据导致页面加载速度变慢的问题。下面我们将深入...

    jquery table ui插件制作css表格隔行变色特效代码

    在实际项目中，`Table UI`插件可能会提供更高级的定制选项，如预定义的主题、分页、排序和过滤等功能。你需要查看具体插件的文档来了解如何结合使用。 总结，实现`jQuery table UI`插件制作的CSS表格隔行变色特效，...

    bootstrap table 分页栏修改

    1. **理解Bootstrap Table分页机制**： Bootstrap Table的分页功能依赖于内置的`pagination`模块。默认情况下，它会生成一个包含“第一”、“上一页”、“下一页”、“最后”按钮以及页码选择器的分页栏。这个过程...

    jquery分页插件quickpaginate的使用

    快速分页插件主要应用于带有`&lt;tbody&gt;`的`&lt;table&gt;`元素。首先，你需要为表格指定一个ID以便于插件识别，例如`id="myTable"`。接着，通过JavaScript代码初始化插件，如下所示： ```javascript $('#myTable')....

    PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用

    - jQuery pager：基于jQuery的分页插件，简化分页操作。 #### 三、具体实现 1. **创建PHP文件**： 创建一个名为`index.php`的文件，用于处理数据查询及分页逻辑。 ```php include_once("./class.config....

    jQuery表格分页排序插件.zip

    jQuery表格分页排序插件，如本压缩包中的SlimTable，是前端开发中常见的工具，用于提高用户体验，尤其是在处理大量数据时。这个插件能够帮助开发者轻松地将静态表格转化为具有动态分页和排序功能的交互式表格。下面...

    jquery 分页插件 dataTables

    **jQuery分页插件dataTables详解** jQuery分页插件dataTables是一款强大的、灵活的、功能丰富的表格增强工具，它能够将普通的HTML表格转化为具有排序、搜索、分页、过滤等高级功能的数据展示平台。dataTables插件...

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