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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
js字符串与Unicode编码互相转换
May 17 Javascript
简单的网页广告特效实例
Aug 19 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
js实现随机点名功能
2020/12/23 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Django 反向生成url实例详解
2019/07/30 Python
python3.6编写的单元测试示例
2019/08/17 Python
python解释器spython使用及原理解析
2019/08/24 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
仓库管理专业个人自我评价范文
2013/11/11 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
实习公司领导推荐函
2014/05/21 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
商务考察邀请函模板
2015/02/02 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书