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

水深无声 2022-07-14 15:52 243阅读 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 条评论，243人围观）

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

相关阅读

相关 Html表格分页

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

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

相关 jQuery 动态添加表格

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

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

相关在 JavaScript 中为任何表格添加分页

分页是每个人都讨厌在他们的网站上实现的那些事情之一，并且在数据大小需要它之前我们会避免这样做。或者直到页面太长以至于滚轮断开并且浏览器崩溃。并且有充分的理由。通常，这是一项有些

爱被打了一巴掌/ 2023年09月30日 12:31/ 0 赞/ 1 阅读

相关表格排序+分页

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

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

相关用jQuery给表格添加样式

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

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

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

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

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

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

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

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

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

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

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

相关 jQuery--标签页效果

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

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

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

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

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