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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
JS highcharts实现动态曲线代码示例
Oct 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php,不用COM,生成excel文件
2006/10/09 PHP
一个php作的文本留言本的例子(四)
2006/10/09 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
javascript每日必学之多态
2016/02/23 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python制作抖音代码舞
2019/04/07 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python 带时区的日期格式化操作
2020/10/23 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
即将毕业大学生自荐信
2014/01/24 职场文书
运动会通讯稿200字
2014/02/16 职场文书
《荷花》教学反思
2014/04/16 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android