Jquery的PageTable分页

最新推荐文章于 2024-02-04 10:11:32 发布

wyczzcl

最新推荐文章于 2024-02-04 10:11:32 发布

阅读量1.5k

点赞数 1

文章标签： jquery function stylesheet table div border

本文链接：https://blog.csdn.net/wyczzcl/article/details/4566854

版权

运行后界面显示：

必需Jquery库文件才能运行，现在Jquery库文件最新版本1.3.2

page.js如下：

jQuery.extend({
page:function(divId,pagesize){
            var div=divId;
   var x="#"+div+" tbody 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);
   //构建菜单
   $(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='fir'>首页</span>");
    $("#menu").append("<span id='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'>下一页</span>");
$("#menu").append("<span id='lat'>末页</span>");
    $("#menu").append("<span id='page_currentPage_allPage'></span>");
$("#fir").css("width","40px");
    $("#next").css("width","50px");
    $("#pre").css("width","50px");
$("#lat").css("width","40px");
    $("#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('#fir','#pre','#next','#lat','#page_currentPage_allPage')").bind("click",{}, function (){ showRow($(this).attr("id"));});
   $("span:not('#page_currentPage_allPage')").bind("mouseover",{}, function (){ $(this).css("cursor", "hand");});
   $("#fir").bind("click",{}, function (){ showFir();});
   $("#pre").bind("click",{}, function (){ showPre();});
   $("#next").bind("click",{}, function (){ showNext();});
    $("#lat").bind("click",{}, function (){ showLast();});
   }

   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 showFir(){
    var p;
    if(currentPage-0>=1){
        p=1;
    }
    showRow(p);

   }

   function showPre(){
    var p;
    if(currentPage-0==1){
        p=1;
    }
    else {
     p=currentPage-1;
    }
    showRow(p);

   }

   function showNext(){
    var p;
    if(currentPage==allPage){
     p=allPage;
    }
    else {
     p=currentPage+1;
    }
    showRow(p);
   }

   function showLast(){
    var p;
    if(currentPage!=allPage){
     p=allPage;
    }
    else {
     p=allPage;
    }
    showRow(p);
   }
   $("#1").css("color","red");   }
    });

html代码如下：

<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>
<link href="ccc.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script type="text/javascript">
$(function(){
  $("tbody>tr:odd").addClass("odd"); //先排除第一行,然后给奇数行添加样式
  $("tbody>tr:even").addClass("even"); //先排除第一行,然后给偶数行添加样式
})
</script>
<script language="javascript">
$(document).ready(
function (){
    jQuery.page("page",5);
}
);
</script>
<body>
<div id="page">
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#006600" id="senfe">
<thead>
    <tr width=100% align="center" valign="middle">
    <td width="46" height="23" bgcolor="#FFFFFF">编号</td>
    <td width="71" bgcolor="#FFFFFF"><select name="select" dir="ltr">
<option>套类别</option>
<option>A套</option>
<option>B套</option>
</select></td>
    <td width="53" bgcolor="#FFFFFF">名称</td>
    <td width="53" bgcolor="#FFFFFF">数量</td>
    <td width="53" bgcolor="#FFFFFF">单价</td>
    <td width="95" bgcolor="#FFFFFF"><select name="select" dir="ltr">
<option>单位</option>
<option>个</option>
<option>双</option>
</select></td>
    <td width="80" bgcolor="#FFFFFF">酒店名称</td>
    <td width="35" bgcolor="#FFFFFF">备注</td>
</tr>
</thead>
<tbody id="group_one">
<tr>
    <td>1</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>2</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>3</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>4</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>5</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>6</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>7</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>8</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>9</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>10</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>11</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>12</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>13</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>14</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td>15</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

以上代码如果还有更简单的代码，望回复。

wyczzcl

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Jquery的PageTable分页

运行后界面显示：必需Jquery库文件才能运行，现在Jquery库文件最新版本1.3.2page.js如下：jQuery.extend({ page:function(divId,pagesize){ var div=divId; var x="#"+div+" tbody tr:has(td)"; var y="#"+di
复制链接

扫一扫