jQuery前端分页示例分享

大家在作分页时，多数是在后台返回一个导航条的html字符串，其实在前端用js也很好实现。

调用pager方法，输入参数，会返回一个导航条的html字符串。方法的内部比较简单。

复制代码 代码如下:

/**
* pageSize,  每页显示数
* pageIndex, 当前页数 
* pageCount  总页数
* url  连接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
    var intPage = 7;  //数字显示
    var intBeginPage = 0;//开始的页数
    var intEndPage = 0;//结束的页数
    var intCrossPage = parseInt(intPage / 2); //显示的数字
    var strPage = "

第 " + pageIndex + "/" + pageCount + " 页 每页 " + pageSize + " 条";
    if (pageIndex > 1) {
        strPage = strPage + "首页 ";
        strPage = strPage + "上一页 ";
    }
    if (pageCount > intPage) {//总页数大于在页面显示的页数
        if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
            intBeginPage = pageCount - intPage + 1;
            intEndPage = pageCount;
        }
        else {
            if (pageIndex <= intPage - intCrossPage) {
                intBeginPage = 1;
                intEndPage = intPage;
            }
            else {
                intBeginPage = pageIndex - intCrossPage;
                intEndPage = pageIndex + intCrossPage;
            }
        }
    } else {
        intBeginPage = 1;
        intEndPage = pageCount;
    }
    if (pageCount > 0) {
        for (var i = intBeginPage; i <= intEndPage; i++) {
            {
                if (i == pageIndex) {//当前页
                    strPage = strPage + " " + i + " ";
                }
                else {
                    strPage = strPage + " " + i + " ";
                }
            }
        }
    }
    if (pageIndex < pageCount) {
        strPage = strPage + "下一页 ";
        strPage = strPage + "尾页 ";
    }
    return strPage+"

";
}

试用这个方法试试

复制代码



   
   
   
   
   


   

       
           
               
               
               
               
               
               
               
               
               
               
               
           
       
       
   

CustomerID	CompanyName	ContactName	ContactTitle	Address	City	Region	PostalCode	Country	Phone	Fax

   

[/code]

看下效果

列有点多，我只截图了部分，界面好丑，加点样式，用bootstrap来美化下

使用Nuget安装bootstrap

加上样式后

虽说不是特别漂亮，但还是对得起观众吧。

代码下载https://github.com/dengjianjun/JsPager

如果觉得对你有帮助，请点个赞，谢谢！