在《Learning jQuery》-Better Interaction Design and Web Development with Simple JavaScript Techniques一书中,作者Jonathan Chaffer 和Karl Swedberg 提供的代码中部分函数在新版的jQuery中已经去掉,所以书中提供的分页示例代码无法使用,在国外网站找到解决办法。
原书中分页示例代码,用来显示第一页的10行数据:
$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.find('tbody tr').show()
.lt(currentPage * numPerPage)
.hide()
.end()
.gt((currentPage + 1) * numPerPage - 1)
.hide()
.end();
});
});
需要将原代码做如下替换,就可以正常进行分页了:
移除.lt(currentPage * numPerPage) 用.slice(0, currentPage * numPerPage)替代...
移除.gt((currentPage + 1) * numPerPage - 1) 用.slice((currentPage + 1) * numPerPage - 1)代替
另外可以把分页处理修改为:
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage, (currentPage + 1) * numPerPage - 1)
.show();
也可达到同样之效果。
这个代码我在使用中,发现要将numPerPage-1改为numPerPage。各位在测试中看看是否正确。
关于slice函数在jQuery中的定义与JavaScript中的定义一致:.slice()用来从匹配的jQuery对象中分离出一部分jQuery对象。下面是调用slice()方法的一些正确方式:
JavaScript代码
$("div").slice(0,1); // 第一个 div
$("div").slice(-1); // 最后一个 div
$("div").slice(1,-1); // 除第一个最后一个的所有 div
$("div").slice(1,3); // 第二个和第三个 div
$("div").slice(7,8); // 第八个 div
slice中两个参数的定义slice(start,end):
start Integer
Where to start the subset. The first element is at zero. Can be negative to start from the end of the selection.
end (Optional) Integer
Where to end the subset (does not include the end element itself). If unspecified, ends at the end of the selection.
今天编写完数据分页,总结一下,完整的分页算法:
//对建立完好的表格进行分页处理
$("table.sortable").each(function(){
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.bind("repaginate", function() {
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage, (currentPage + 1) * numPerPage)
.show();
});//repaginate
var numRows = $('table.sortable').find("tbody tr").length;
var numPages = Math.ceil(numRows/numPerPage);
var $pager = $('<div class="page"></div>');
for(var page=0;page<numPages;page++){
$('<a href=# ><span class="page-number">' + (page + 1) + '</span></a>').bind("click", { "newPage": page }, function(event) {
currentPage = event.data["newPage"];
$table.trigger("repaginate");
$(this).addClass("active").siblings().removeClass("active");
}).appendTo($pager);
$pager.append(" ");
} //for
$pager.find("span.page-number:first").addClass("active");
$pager.insertAfter($table);
$table.trigger("repaginate");
分享到:
相关推荐
jquery中添加属性和删除属性: 代码如下: $(“#2args”).attr(“disabled”,’disabled’); $(“#2args”).removeAttr(“disabled”); 问题背景: 选择“选项1”是,“两个参数”这个单选按钮有效。 选择“选项2”...
通过以上知识点,可以看到,在实际开发中,若需要从一个iframe中获取src属性值,可以利用jQuery的选择器、attr()方法,以及$(document).ready()等,这些是进行DOM操作和动态获取内容时常用的方法。同时,也需要考虑...
Placeholder是HTML5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。如: <input name="username" type="text" placeholder=...
如果JQuery方法直接将包含的内容插入到DOM中,这些标签内的代码很可能会被执行,导致不可预期的行为。 然而,在AJAX应用中,经常需要局部更新页面中的内容,这通常包括更新含有块的HTML。此时,如果直接使用html...
本文实例讲述了jQuery中size()方法用法。分享给大家供大家参考。具体分析如下: 此方法可以返回jQuery对象集合中元素的数目。 size()方法的返回值与jQuery对象的length属性一致。 语法结构: 代码如下:$(selector)....
data linking与data-binding的理论很相近(我们之所以使用data linking这个名称是因为jQuery中已经包含bing()方法,尽管这个方法与数据绑定没有什么关系…)。 现在来看看data linking该如何使用。假设有一个页面,...
### jQuery常用方法详解 ...以上列举了jQuery中常用的多种方法和选择器,涵盖了元素操作、动画、网络请求等多个方面,是前端开发中不可或缺的强大工具。正确掌握和运用这些方法,可以极大地提高网页开发的效率和质量。
1. **AJAX 请求**: jQuery 的 `.ajax()` 方法是核心的异步数据请求方法,支持GET和POST请求。此外,还有 `.get()`, `.post()`, `.load()` 等简化的版本。 2. **JSONP 支持**: 通过在URL中指定回调函数名,jQuery ...
在jquery中可以使用attr()函数修改按钮的disable属性 $(“#test”).attr(‘disabled’,false); jquery 控制button的disabled属性 代码如下: $(‘#button’).attr(‘disabled’,”true”);添加disabled属性 $(‘#...
使用JQuery选择器选取元素时,即使页面上不存在该元素,返回的也将是一个空的对象而不是错误提示。 5. **文档加载完成事件**:`$(document).ready()`函数用于当整个文档(包括图片、框架等内容)加载完成后执行相应...
遍历DOM时,`each()`方法可以对每个匹配的元素执行一个函数,而`size()`和`length`属性可以获取jQuery对象集合中元素的数量。`selector`属性返回创建jQuery对象时传入的原始选择器,而`context`属性返回原始的DOM...
下面将详细解析标题和描述中提到的jQuery选择器与属性方法。 1. **样式选择器**: - `parent > child`:这种选择器用于选取父元素下的直接子元素,例如`$("div > span")`会选取所有`<div>`内的直接`<span>`子节点...
3. 位置选择器:`$:first`、`:last`、`:eq(index)`、`:gt(index)`、`:lt(index)`等。 4. 子元素选择器:`$("parent > child")`。 5. 其他高级选择器,如`:not()`, `:has()`, `:contains()`, `:parent`等。 **...
本文实例讲述了jQuery中removeAttr()方法用法。分享给大家供大家参考。具体分析如下: 此方法从匹配元素中移除相应的属性。 语法结构: 代码如下:$(selector).removeAttr(attribute) 参数列表: 参数 描述 ...
- **gt() 和 lt() 选择器**:分别表示选取索引大于或小于给定数的元素,例如 `$("ul li:gt(3)")` 表示选择`ul`中索引大于3的`li`元素。 - **header选择器**:选取所有标题元素,即`h1`到`h6`。 - **animated选择器**...
**jQuery API 中文手册** jQuery 是一款广泛应用于前端开发的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及...在实际开发中,结合实践与手册,可以更好地理解和掌握jQuery的精髓。
在jQuery 中$(“”),这个语法等同于$(document.createElement(“span”)) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下: ...
在jQuery 1.3版本中,这个库进一步提升了性能和功能,使其成为了当时前端开发的首选工具之一。 **一、选择器** jQuery 1.3中的选择器是其核心功能之一,它们允许开发者通过CSS1-3选择器语法来选取HTML元素。例如,...
- `:eq(index)`、`:gt(index)` 和 `:lt(index)`:根据索引值选择元素。 - `:not(selector)`:排除指定选择器匹配的元素。 4. **内容选择器**: - `:contains(text)`:匹配包含指定文本的元素。 - `:empty`:...