使用方法:
(1)下载jquery.js,现在最新版本为1.3
(2)新建js,我的为page.js,放入以下代码。
jQuery.extend({
page:function(divId,pagesize){
var div=divId;
var x="#"+div+" table 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);
//alert(max_number);
//构建菜单
$(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='pre'>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'>next</span>"); //下一页
$("#menu").append("<span id='page_currentPage_allPage'></span>");
$("#next").css("width","30px");
$("#pre").css("width","30px");
$("#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('#pre','#next','#page_currentPage_allPage')").bind("click",{}, function (){ showRow($(this).attr("id"));});
$("span:not('#page_currentPage_allPage')").bind("mouseover",{}, function (){ $(this).css("cursor", "hand");});
$("#pre").bind("click",{}, function (){ showPre();});
$("#next").bind("click",{}, function (){ showNext();});
}
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 showPre(){
var p;
if(currentPage-0==1){
p=allPage;
}
else {
p=currentPage-1;
}
showRow(p);
}
function showNext(){
var p;
if(currentPage==allPage){
p=1;
}
else {
p=currentPage+1;
}
showRow(p);
}
$("#1").css("color","red"); }
});
(3)
使用方法很简单,页面引用这两个js文件。
然后加入
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="page.js"></script>
<script language="javascript">
$(document).ready(
function (){
jQuery.page("page",5);
}
);
</script>
jQuery.page("page",5); 为主要使用方法,其中参数“page”为围绕table的div层id,数字5为要每页要显示的输入数。
(4)下面给出的是我的例子,省略(1)(2)。
<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>
<script language="javascript">
$(document).ready(
function (){
jQuery.page("page",5);
}
);
</script>
<body>
<div id="page">
<table width="280" border="1">
<tr>
<th width="80">id</th>
<th width="184">name</th>
</tr>
<tr>
<td>1</td>
<td>fds</td>
</tr>
<tr>
<td>2</td>
<td>fsdfsd</td>
</tr>
<tr>
<td>3</td>
<td>fsdfsd</td>
</tr>
<tr>
<td>4</td>
<td>fsdf</td>
</tr>
<tr>
<td>5</td>
<td>sdfds</td>
</tr>
<tr>
<td>6</td>
<td>fsdf</td>
</tr>
<tr>
<td>7</td>
<td>sdfsd</td>
</tr>
<tr>
<td>8</td>
<td>fsdf</td>
</tr>
<tr>
<td>9</td>
<td>sdfsd</td>
</tr>
<tr>
<td>10</td>
<td>fdsf</td>
</tr>
</table>
</div>
</body>
</html>
效果图:
附有一个jquery API.
- 大小: 2.8 KB
分享到:
相关推荐
jQuery表格数据分页插件是一种高效且用户友好的方式,用于在网页上展示大量数据,尤其是在处理表格时。这些插件通常提供动态加载、自定义样式、数据过滤和排序等功能,使得网页上的表格数据管理更加方便。在这个...
首先,理解jQuery table分页的基本概念。表格分页是指将大量数据分成多个小块(通常每页显示固定数量的行),用户可以通过页码或导航按钮在这些数据块之间切换。这使得用户可以快速浏览和定位他们关心的信息,而无需...
3. **分页插件**:虽然可以手动实现分页逻辑,但为了提高效率和代码可维护性,推荐使用jQuery分页插件,如`jquery_pagination.js`。安装插件后,只需几行代码即可实现分页功能。 4. **配置分页**:在HTML结构中创建...
Paginathing.js是基于jQuery的一款轻量级前端分页插件。这个插件专为那些希望在不依赖后端服务器处理的情况下,实现前端列表或表格数据分页的开发者设计。通过使用Paginathing.js,你可以轻松地将大量数据分成小块...
以下是实现jQuery table分页的基本步骤: 1. **HTML结构**:创建一个包含表格数据的`<table>`元素,并确保每个数据都在`<tr>`元素中。此外,还需要为分页组件预留位置,例如`<div id="pager"></div>`。 2. **引入...
二、jQuery表格分页插件 jQuery有多个插件用于实现表格分页,例如: 1. jQuery DataTables:这是一个强大的数据表插件,它提供了分页、排序、搜索和过滤等功能。DataTables支持自定义分页样式,同时提供了多种数据...
jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。 jQuery(document).ready(function($){ for (var i = 1; i ; i ) { $('.list-group').append('...
DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。
本教程将深入讲解如何利用jQuery实现一个带分页的动态数据表格插件。 首先,我们需要理解jQuery的核心概念。jQuery通过提供易用的API,使得JavaScript代码更简洁、更高效。例如,`$(selector)`用于选取DOM元素,`....
jQuery(document).ready(function($){ for (var i = 1; i ; i ) { $('.list-group').append('<li class="list-group-item"> Item ' i '</li>'); } $('.list-group').paginathing({ perPage: 5, ...
`jquery.pagination.js`是jQuery分页插件的脚本,实现了分页的逻辑和界面渲染;而`hongtu-1.0.0.js`可能是另一个库或自定义的辅助脚本,可能包含特定的功能或者样式支持。 使用这些组件,开发者可以轻松地创建一个...
Bootstrap分页插件是一种基于流行的前端框架Bootstrap设计的页面导航工具,主要用于在大量数据或内容中实现分块显示,提供用户友好的翻页体验。在Web应用中,当需要展示的数据超过一个页面所能容纳的范围时,分页就...
jQuery插件PagedTable是一种广泛使用的前端解决方案,用于在网页上展示大量数据时实现表格的分页功能。这种插件可以极大地提升用户体验,因为它避免了一次性加载所有数据导致页面加载速度变慢的问题。下面我们将深入...
在实际项目中,`Table UI`插件可能会提供更高级的定制选项,如预定义的主题、分页、排序和过滤等功能。你需要查看具体插件的文档来了解如何结合使用。 总结,实现`jQuery table UI`插件制作的CSS表格隔行变色特效,...
1. **理解Bootstrap Table分页机制**: Bootstrap Table的分页功能依赖于内置的`pagination`模块。默认情况下,它会生成一个包含“第一”、“上一页”、“下一页”、“最后”按钮以及页码选择器的分页栏。这个过程...
快速分页插件主要应用于带有`<tbody>`的`<table>`元素。首先,你需要为表格指定一个ID以便于插件识别,例如`id="myTable"`。接着,通过JavaScript代码初始化插件,如下所示: ```javascript $('#myTable')....
- jQuery pager:基于jQuery的分页插件,简化分页操作。 #### 三、具体实现 1. **创建PHP文件**: 创建一个名为`index.php`的文件,用于处理数据查询及分页逻辑。 ```php include_once("./class.config....
jQuery表格分页排序插件,如本压缩包中的SlimTable,是前端开发中常见的工具,用于提高用户体验,尤其是在处理大量数据时。这个插件能够帮助开发者轻松地将静态表格转化为具有动态分页和排序功能的交互式表格。下面...
**jQuery分页插件dataTables详解** jQuery分页插件dataTables是一款强大的、灵活的、功能丰富的表格增强工具,它能够将普通的HTML表格转化为具有排序、搜索、分页、过滤等高级功能的数据展示平台。dataTables插件...