`
shaojiashuai123456
  • 浏览: 256633 次
  • 性别: 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有几千条怎么办呢？
发表评论

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

相关推荐

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