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 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
javascript生成大小写字母
Jul 03 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
微信小程序 checkbox使用实例解析
Sep 09 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中异常处理的一些方法整理
2015/07/03 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
详解Python中的Descriptor描述符类
2016/06/14 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python实现五子棋小程序
2019/06/18 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python实现简单井字棋游戏
2020/03/04 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
公司成立感言
2014/01/11 职场文书
益达广告词
2014/03/14 职场文书
工程部岗位职责
2015/02/10 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
贷款担保书范本
2015/09/22 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
使用python绘制分组对比柱状图
2022/04/21 Python