jQuery给表格添加分页效果

本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下

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>

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="#" rel="external nofollow" id="pageStyle" onclick="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.好了,打开浏览器试试

点击页码可翻页,成功!

更多精彩内容请点击:jquery分页功能汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 扩展jquery实现客户端表格的分页、排序功能代码

    下载代码和示例:jqueryPaging.rar 使用方法如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number"

  • jquery 表格分页等操作实现代码(pagedown,pageup)

    没什么技术含量,先上图: 思路: 1:获取按键 2:判断当前表格行的位置 HTML结构: 复制代码 代码如下: <div id="formdiv" align="center"> firstname:<input type="text" id="firstname"/> lastname:<input type="text" id="lastname"/&g

  • 基于jquery实现表格无刷新分页

    本文实例讲解了基于jquery实现表格无刷新分页功能,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <title>面向对象的无刷新表格分页</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" hre

  • 基于jQuery实现的无刷新表格分页实例

    本文实例讲述了基于jQuery实现的无刷新表格分页.分享给大家供大家参考,具体如下: 效果图如下: html结构: <table id="cs_table" class="datatable"></table> css样式: html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, th, td {font: 12px Arial,Helvetica

  • 基于jquery实现的表格分页实现代码

    具体代码如下: 引用js和css文件有: 复制代码 代码如下: <link ID="skin" rel="stylesheet" type="text/css" href="css/config.css"> <script type="text/javascript" src="js/config.js"></script> <script ty

  • JQuery页面的表格数据的增加与分页的实现

    复制代码 代码如下: var countPage; var nowPag = 1; var pageSize; var countSize; var starIndex; var endIndex; // 用户提交信息 var name; var sex; var age; // 定义行号 var num = 1; $(document).ready(function() { // 注册添加用户的事件 $("#submit").click(function() { // 获取用户提交的

  • 利用jQuery实现一个简单的表格上下翻页效果

    前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&

  • 基于Jquery实现表格动态分页实现代码

    当页面点击分页图标时,程序会自动去后台获取对应页数的记录. 关键代码如下: 需要引入的css和js文件有: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link> <link ID="skin" rel="sty

  • jQuery给表格添加分页效果

    本文实例为大家分享了jQuery表格添加分页的具体代码,供大家参考,具体内容如下 1. 新建一个Table,添加十行数据 <table cellspacing="0"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tbody> <tr> <t

  • jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码.分享给大家供大家参考,具体如下: 这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期待大家关注. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W

  • Vue组件库ElementUI实现表格列表分页效果

    ElementUI实现表格列表分页效果教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 <el-pagination>加上@size-change="handleSizeChange.@current-change="handleCurrentChange"处理当前页和当前页数的改变事件 <!--

  • 基于jquery.page.js实现分页效果

    基于jquery.page.js的一款简单的分页效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>简单的jQuery分页插件</title> <style> *{ margin:0; padding:0; list-style:none;} a{ text-decoration:none;} a:h

  • jquery.pager.js实现分页效果

    本文实例为大家分享了jquery.pager.js实现分页的具体代码,供大家参考,具体内容如下 1.html <link href="/stylesheets/Pager.css" rel="external nofollow" rel="stylesheet" type="text/css"/> <script src="/javascripts/web/jquery.pager.js"

  • JQuery拖动表头边框线调整表格列宽效果代码

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.

  • 超级简单的jquery操作表格方法

    本文实例讲述了超级简单的jquery操作表格方法.分享给大家供大家参考.具体实现方法如下: 利用jquery给指定的table添加一行.删除一行 复制代码 代码如下: <script language="javascript" src="./jquery.js"></script> <table border="1px #ooo" id="test" name="test" c

  • JQuery.dataTables表格插件添加跳转到指定页

    一.解决方案 1.添加自定义工具栏,嵌入文本框 "dom": 'l<"toolbar">frtip', //自定义工具栏 //设置工具栏内容 //l - length changing input control //f - filtering input //t - The table! //i - Table information summary //p - pagination control //r - processing display e

  • JS实现table表格数据排序功能(可支持动态数据+分页效果)

    asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

随机推荐