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

短命女 2022-07-14 15:52 349阅读 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 条评论，349人围观）

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

相关阅读

相关 Html表格分页

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

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

相关 jQuery 动态添加表格

阅读目录预览源码预览 ![在这里插入图片描述][1e903e3fce484c4393bbcb3ceebf34e2.gif_pic_center]

本是古典何须时尚/ 2023年10月06日 22:14/ 0 赞/ 55 阅读

相关表格排序+分页

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

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

相关用jQuery给表格添加样式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 jQuery--标签页效果

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

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

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

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

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