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 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
angular多语言配置详解
May 16 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
跟我学Laravel之配置Laravel
2014/10/15 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
use jscript List Installed Software
2007/06/11 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
python写xml文件的操作实例
2014/10/05 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
学习十八大标语
2014/10/09 职场文书
小学重阳节活动总结
2015/03/24 职场文书