众果搜的博客

脚踏大地,仰望星空,致力于财经投资网站导航与在线网络工具的开发与普及

Search(博客搜索)

热文排行

最近发表

最新评论及回复

« Google地图之jQuery插件jmaps使用IIS程序池导致网站无法访问:Service Unavailable 解决经过 »

jQuery中的lt和gt方法之不支持该属性的解决方法

 在《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("&nbsp;");
                }  //for
                $pager.find("span.page-number:first").addClass("active");  
                $pager.insertAfter($table);  
                $table.trigger("repaginate"); 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-Blog 1.8 Spirit Build 80722 Code detection by Codefense

Copyright www.zhongguosou.com. Some Rights Reserved.微信号:MiZhiHeiGeTaXiaoMi