如何使用Jquery做更好的分页?

时间:2013-02-14 13:33:57

标签: jquery paging

大家好我有功能返回大量数据..我已经为此做了一个分页工作正常但是...我对我编写的代码不满意我想要一些建议让它更好

这就是我正在做的事情

      function getproducts(categoryid) {    
PreReqisites.scommerce.ajaxSettings.async = false;
PreReqisites.scommerce.ajax({
    url: url,
    jsonp: PreReqisites.jsonp,
    dataType:PreReqisites.dataType,
    success: function (data) {           
        PreReqisites.scommerce.getScript(PreReqisites.varTempletURL, function () {
            PreReqisites.varResult = [];
            for (var i = 0; i < data.d.results.length; i++)
            {
                var varItems=data.d.results[i];
                PreReqisites.varResult.push({ ProductId: varItems.ProductId, ProductName: varItems.ProductName, MSRP: varItems.MSRP, ThumbNailImage: getData(varItems.ThumbNailImage), uri: varItems.uri });
            }
       //paging function starts set the defalut index value to zero
            fnBinding(PreReqisites.Index);
        });
    }
});  

}

分页功能

    //Page index building
  function fnBinding(pageIndex)
   {
    var varPageCount = 0;
    var varPagingEnd = pageIndex * 10;
    PreReqisites.varPageEndingIndex = varPagingEnd;
    var varPagingStart = varPagingEnd - 10;
    var varPaging = "<ul class='numbers'>";

    if (pageIndex == 1) {
   //disable prev button when page index is 1
       varPaging = varPaging + "   <li><a href='javascript:void(0);'  onclick='fnBinding(" + pageIndex + ")' disabled>&lt;&lt; PREV</a></li>";
    varPageCount = PreReqisites.varResult.length / 10;
}
else
{
   var pagePreIndex = parseInt(pageIndex) - 1;
   varPaging = varPaging + "   <li><a href='javascript:void(0);'  onclick='fnBinding(" + pagePreIndex + ")'>&lt;&lt; PREV</a></li>";
   varPageCount = PreReqisites.varResult.length / 10;
   varPageCount = varPageCount + pageIndex;
}    
if (varPageCount > 3) {
    varPageCount = pageIndex + 2;
}
if (varPageCount > PreReqisites.varResult.length / 10) {
    varPageCount = PreReqisites.varResult.length / 10;

}   
for (var i = pageIndex; i <= varPageCount; i++)
{
    if(pageIndex==i)
    {
        varPaging=varPaging+"<li><a href='javascript:void(0);' class='selected' onclick='fnBinding("+i+")'>"+i+"</a> </li>";
    }
    else
    {
        varPaging = varPaging + "<li><a href='javascript:void(0);' onclick='fnBinding(" + i + ")'>" + i + "</a> </li>";
    }
}
$('#divPaging').html('');
if (pageIndex == varPageCount) {
    varPaging = varPaging + "   <li><a href='javascript:void(0);'  onclick='fnBinding(" + pageIndex + ")' disabled>NEXT &gt;&gt;</a></li>";
}
else {
    var pageNextIndex = parseInt(pageIndex) + 1;
    varPaging = varPaging + "   <li><a href='javascript:void(0);'  onclick='fnBinding(" + pageNextIndex + ")'>NEXT &gt;&gt;</li></ul>";
} 
$('#divPaging').append(varPaging);
$('.catproducts').html('');
var varValue = PreReqisites.varResult.slice(varPagingStart, varPagingEnd);
        $(".catproducts").append(PreReqisites.scommerce.tmpl(STOREFRONTS_PRODUCTS_TEMPLATES.PRODUCT_TMPL, varValue));
 }

我需要一些关于这种分页的建议并更好地格式化代码......我在这里做的是什么 像这样设置页面索引

     << prev 1 2 3 next > >

当我点击下一步时,我将首页并向他显示这样的页面&lt;&lt; prev 2 3 4 next&gt;&gt;并继续

以同样的方式,如果点击prev按钮我加载我们在下次点击时删除的上一页&lt;&lt; prev 1 2 3 next> &GT;并继续

1 个答案:

答案 0 :(得分:0)

查看jPagination

它非常易于使用!刚刚宣读了演示!

希望有所帮助! :)