利用jQuery给表格添加分页效果

短命女 2022-07-14 15:52 311阅读 0赞

1. 新建一个Table，添加十行数据

<table cellspacing="0">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张飞</td>
          <td>男</td>
        </tr>
        <tr>
          <td>2</td>
          <td>刘备</td>
          <td>男</td>
        </tr>
        <tr>
          <td>3</td>
          <td>关羽</td>
          <td>男</td>
        </tr>
        <tr>
          <td>4</td>
          <td>妲己</td>
          <td>女</td>
        </tr>
        <tr>
          <td>5</td>
          <td>后羿</td>
          <td>男</td>
        </tr>
        <tr>
          <td>6</td>
          <td>大乔</td>
          <td>女</td>
        </tr>
        <tr>
          <td>7</td>
          <td>露娜</td>
          <td>女</td>
        </tr>
        <tr>
          <td>8</td>
          <td>E.Z</td>
          <td>男</td>
        </tr>
        <tr>
          <td>9</td>
          <td>琴女</td>
          <td>女</td>
        </tr>
        <tr>
          <td>10</td>
          <td>貂蝉</td>
          <td>女</td>
        </tr>
      </tbody>
    
    </table>

![20170301184456063][]  
2. 引入jQuery 及script代码

<script src="jquery-1.11.1.js"></script>
    <script>
      $(function(){
    	 var $table = $('table');
    	 var currentPage = 0;//当前页默认值为0
    	 var pageSize = 3;//每一页显示的数目
    	 $table.bind('paging',function(){
    		 $table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
    	 });	 
    	 var sumRows = $table.find('tbody tr').length;
    	 var sumPages = Math.ceil(sumRows/pageSize);//总页数
    	 
    	 var $pager = $('<div class="page"></div>');  //新建div，放入a标签,显示底部分页码
    	 for(var pageIndex = 0 ; pageIndex<sumPages ; pageIndex++){
    		 $('<a href="#" id="pageStyle" οnclick="changCss(this)"><span>'+(pageIndex+1)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){
    			 currentPage = event.data["newPage"];
    			 $table.trigger("paging");
    			   //触发分页函数
    			 }).appendTo($pager);
    			 $pager.append(" ");
    		 }	 
    		 $pager.insertAfter($table);
    		 $table.trigger("paging");
    		 
    		 //默认第一页的a标签效果
    		 var $pagess = $('#pageStyle');
    		 $pagess[0].style.backgroundColor="#006B00";
    		 $pagess[0].style.color="#ffffff";
    });
    
    //a链接点击变色，再点其他回复原色
      function changCss(obj){
    	var arr = document.getElementsByTagName("a");
    	for(var i=0;i<arr.length;i++){	
    	 if(obj==arr[i]){       //当前页样式
    	  obj.style.backgroundColor="#006B00";
    	  obj.style.color="#ffffff";
    	}
    	 else
    	 {
    	   arr[i].style.color="";
    	   arr[i].style.backgroundColor="";
    	 }
    	}
     }	  
    </script>

3. 另外，附上表格和底部分页码的css样式

<style>
     table{
    	 width:600px;
    	 text-align:center;
    	 }
     table tr th,td{
    	 height:30px;
    	 line-height:30px;
    	 border:1px solid #ccc;
    	 }
      #pageStyle{
    	 display:inline-block;
    	 width:32px;
    	 height:32px;
    	 border:1px solid #CCC;
    	 line-height:32px;
    	 text-align:center;
    	 color:#999;
    	 margin-top:20px;
    	 text-decoration:none;
    
    	 }
      #pageStyle:hover{
    	  background-color:#CCC;
    	  }
      #pageStyle .active{
    	  background-color:#0CF;
    	  color:#ffffff;
    	  }		 
    </style>

4.好了，打开浏览器试试

![20170301184750708][]

![20170301184758197][]

点击页码可翻页，成功！

[20170301184456063]: /images/20220709/0c0889396a024071a1b11f3cc472ac5f.png
[20170301184750708]: /images/20220709/79ab12cfdd6143a0b3cdc83a4499fe64.png
[20170301184758197]: /images/20220709/382f6f90632c4d8f9e090a6b23db9715.png

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关 Html表格分页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

一时失言乱红尘/ 2024年02月17日 14:06/ 0 赞/ 52 阅读

相关表格排序+分页

因为无聊封装了一个表格排序加分页的程序结果写完后变的更无聊了........ <style type="text/css"> .tab\{border:\CCCCC

刺骨的言语ヽ痛彻心扉/ 2022年08月24日 04:22/ 0 赞/ 269 阅读

相关用jQuery给表格添加样式

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></

╰+攻爆jí腚メ/ 2022年07月28日 00:20/ 0 赞/ 224 阅读

相关利用jQuery给表格添加分页效果

1. 新建一个Table，添加十行数据 <table cellspacing="0"> <thead> <tr> <t

水深无声/ 2022年07月14日 15:52/ 0 赞/ 201 阅读

相关利用jQuery给表格添加分页效果

1. 新建一个Table，添加十行数据 <table cellspacing="0"> <thead> <tr> <t

短命女/ 2022年07月14日 15:52/ 0 赞/ 312 阅读

相关 js框架jquery实现分页效果代码下载

原文：[js框架jquery实现分页效果代码下载][js_jquery] 源代码下载地址： [http://www.zuidaima.com/share/1896994925

╰+哭是因爲堅強的太久メ/ 2022年07月11日 16:05/ 0 赞/ 160 阅读

相关利用vue和element-ui设置表格内容分页

html代码因为我写在template中，也就是新建了组建中，贴出代码。 <el-pagination small

心已赠人/ 2022年06月07日 13:56/ 0 赞/ 177 阅读

相关 Mybatis pageHelper 配合jquery DataTable实现分页效果

Hibernate中集成了分页的后台方法，Mybatis中没有，想要方便的使用分页功能，就必须使用牛人开发的pageHelper插件。前台配合jquery的datata

快来打我*/ 2022年05月29日 01:38/ 0 赞/ 249 阅读

相关 jQuery--标签页效果

前言内容显示效果 HTML代码： CSS代码： Ja

绝地灬酷狼/ 2021年09月27日 04:56/ 0 赞/ 418 阅读

相关 ElementUI实现表格列表分页效果教程

ElementUI实现表格列表分页效果教程 > Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue

小鱼儿/ 2021年09月08日 03:24/ 0 赞/ 603 阅读