jQuery前端分页示例分享


Posted in Javascript onFebruary 10, 2015

大家在作分页时,多数是在后台返回一个导航条的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 = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>";

    if (pageIndex > 1) {

        strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=1&pageSize=" + pageSize + "'><span>首页</span></a> ";

        strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex - 1) + "&pageSize=" + pageSize + "'><span>上一页</span></a> ";

    }

    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 + " <a class='current' href='javascript:void(0);'>" + i + "</a> ";

                }

                else {

                    strPage = strPage + " <a class='pageNav' href='" + url + "?pageIndex=" + i + "&pageSize=" + pageSize + "' title='第" + i + "页'>" + i + "</a> ";

                }

            }

        }

    }

    if (pageIndex < pageCount) {

        strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "'><span>下一页</span></a> ";

        strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + pageCount + "&pageSize=" + pageSize + "'><span>尾页</span></a> ";

    }

    return strPage+"</div>";

}

试用这个方法试试

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Script/ajax-pager.js"></script>
    <script src="Script/jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function () {
            loadData(1, 10);
            //分页条点击事件
            $(document.body).on('click', '.pageNav', function () {
                var pageSize = Number(getQueryString('pageSize', $(this).attr('href')));
                var pageIndex = Number(getQueryString('pageIndex', $(this).attr('href')));
                loadData(pageIndex, pageSize);
                return false;//不跳转页面
            });
        });
        //加载数据
        function loadData(pageIndex, pageSize) {
            $.getJSON('Content/CustomersData.txt', { pageIndex: pageIndex, pageSize: pageSize }, function (data) {
                var beginIndex = (pageIndex - 1) * pageSize;
                var endIndex = pageIndex * pageSize - 1;
                var tbodyHtml = '';
                for (var i = beginIndex; i < endIndex; i++) {
                    if (!data.Rows[i]) {
                        break;
                    }
                    var tbody = '<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td>';
                    tbody += '<td>{6}</td><td>{7}</td><td>{8}</td><td>{9}</td><td>{10}</td></tr>';
                    tbody = tbody.format(data.Rows[i].CustomerID, data.Rows[i].CompanyName, data.Rows[i].ContactName,
                        data.Rows[i].ContactTitle, data.Rows[i].Address, data.Rows[i].City,
                        data.Rows[i].Region ? data.Rows[i].Region : '', data.Rows[i].PostalCode, data.Rows[i].Country,
                        data.Rows[i].Phone, data.Rows[i].Fax ? data.Rows[i].Fax : '');
                    tbodyHtml += tbody;
                }
                $('#tb').find('tbody').first().html(tbodyHtml);
                var pageCount = parseInt((data.Total / pageSize)) + (data.Total % pageSize ? 1 : 0);
                $('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'CustomersData.txt'));
            }
            );
        }
        //字符串格式化
        String.prototype.format = function (args) {
            var result = this;
            var reg;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if (args[key] !== undefined) {
                            reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                } else {
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] !== undefined) {
                            reg = new RegExp("({)" + i + "(})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
        };
        //获取url参数
        function getQueryString(name, url) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            url = url && url.indexOf('?') >= 0 ? url.substring(url.indexOf('?'), url.length) : window.location.search;
            var r = url.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    </script>
</head>
<body>
    <table id="tb" border="1" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th width="90px;">CustomerID</th>
                <th width="240px;">CompanyName</th>
                <th width="130px;">ContactName</th>
                <th width="140px;">ContactTitle</th>
                <th width="205px;">Address</th>
                <th width="90px;">City</th>
                <th width="50px;">Region</th>
                <th width="80px;">PostalCode</th>
                <th width="80px;">Country</th>
                <th width="95px;">Phone</th>
                <th width="95px;">Fax</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="dvPager"></div>
</body>
</html>
[/code]

看下效果

jQuery前端分页示例分享

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

使用Nuget安装bootstrap

jQuery前端分页示例分享

加上样式后

jQuery前端分页示例分享

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

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

如果觉得对你有帮助,请点个赞,谢谢!

Javascript 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
JS定义类的六种方式详解
May 12 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
js进行表单验证实例分析
Feb 10 #Javascript
EasyUi datagrid 实现表格分页
Feb 10 #Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 #Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 #Javascript
JS数组的常见用法实例
Feb 10 #Javascript
bootstrap table 服务器端分页例子分享
Feb 10 #Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 #Javascript
You might like
php 字符串替换的方法
2012/01/10 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
js实现微博发布小功能
2017/01/12 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Python内置函数dir详解
2015/04/14 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
如何开启linux的ssh服务
2015/02/14 面试题
异步传递消息系统的作用
2016/05/01 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
产品销售员岗位职责
2013/12/18 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
青春奉献演讲稿
2014/05/08 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python