找回密码
当前位置：前端开发者 > jQuery > 正文

前端开发怎么实现异步刷新分页

2018-07-09 分类：jQuery 阅读(790) 评论(0)

前端微信扫码支付开发|w前端开发的笔记本知乎|web前端开发技术答案
代码片段 1

<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
    <title>前端开发个人总结:jquery实现无刷新分页</title>
    <style type=”text/css”>
        body {
            font-family: “微软雅黑”;
            font-size: 13px;
        }
        #wrap {
            width: 600px;
        }
        .tbpage {
            width: 600px;
            border-collapse: collapse;
            margin-bottom: 10px;
        }
        .tbpage th {
            background-color: #efefef;
            border: 1px solid #aaa;
            font-size: 14px;
            height: 30px;
        }
        .tbpage td {
            text-align: left;
            text-indent: 15px;
            border: 1px solid #aaa;
            height: 20px;
        }
        #pages {
            display: table-cell;
            float: right;
        }
        #pages a {
            text-decoration: none;
            background-color: White;
            border: 1px solid #e8e8e8;
            display: inline-block;
            width: 30px;
            height: 30px;
            color: Black;
            text-align: center;
            line-height: 30px;
        }
        #pages a:hover {
            color: #f40;
            border: 1px solid #f40;
        }
        #pages .on {
            background-color: #f40;
            color: White;
            border: 1px solid #f40;
        }
        #pages .on:hover {
            background-color: #f40;
            color: White;
            border: 1px solid #f40;
        }
    </style>
    <script type=”text/javascript” src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js”></script>
    <script type=”text/javascript”>
        _jsonData = [];
        $(function () {
            //生成测试数据 — json
            for (var i = 0; i < 200; i++) {
                _jsonData.push({ name: “张三” + (i + 1), pwd: “123456abc” + (i + 1), age: (i + 1) });
            }
            pageTotal.getDate(1, 1);
            //alert(_jsonData.length);
        });
        //封装分页数据
        var pageTotal = {
            current: 1, //当前页
            pageCount: 8, //每页显示的数据量
            count: 0,//总数据量
            total: 0, //总共的页码
            first: 1, //首页
            last: 0, //尾页
            pre: 0, //上一页
            next: 0, //下一页
            getPages: function () { //计算分页信息
                pageTotal.total = Math.ceil(pageTotal.count / pageTotal.pageCount);
                pageTotal.last = pageTotal.total;
                pageTotal.pre = pageTotal.current – 1 <= 0 ? 1 : (pageTotal.current – 1);
                pageTotal.next = pageTotal.current + 1 >= pageTotal.total ? pageTotal.total : (pageTotal.current + 1);
            },
            //获取数据
            getDate: function (pageno, type) {
                //清除content所有数据和元素
                $(“#tbcontent”).empty();
                if (pageno == null) {
                    pageno = 1;
                }
                //设置当前页
                pageTotal.current = pageno;
                pageTotal.count = _jsonData.length;
                //设置每页显示的数据条数
                pageTotal.pageCount = 8;
                //分页信息
                for (var i = (pageno – 1) * pageTotal.pageCount; i < ((pageTotal.current) * (pageTotal.pageCount)); i++) {
                    $(“#tbcontent”).append(“<tr><td>” + _jsonData[i][“name”] + “</td><td>” + _jsonData[i][“pwd”] + “</td><td>” + _jsonData[i][“age”] + “</td></tr>”);
                }
                //获取分页样式
                pageTotal.page(type); //type表示分页栏样式
            },
            page: function (type) {
                //清除分页栏元素
                $(“#pages”).empty();
                //填充分页样式欠要加载分页数据
                pageTotal.getPages();
                if (type == 1) {
                    var x = 6;
                    //设置上下页
                    $(“#pages”).append(pageTotal.current + “/” + pageTotal.total + “&nbsp;&nbsp;&nbsp;<a href=’javascript:pageTotal.getDate(1,” + type + “);’>首页</a>&nbsp;&nbsp;&nbsp;&nbsp;”);
                    var index = pageTotal.current <= Math.ceil(x / 2) ? 1 : (pageTotal.current) >= pageTotal.total – Math.ceil(x / 2) ? pageTotal.total – x : (pageTotal.current – Math.ceil(x / 2));
                    var end = pageTotal.current <= Math.ceil(x / 2) ? (x + 1) : (pageTotal.current + Math.ceil(x / 2)) >= pageTotal.total ? pageTotal.total : (pageTotal.current + Math.ceil(x / 2));
                    for (var i = index; i <= end; i++) {
                        if (i == pageTotal.current) {
                            $(“#pages”).append(“<a href=’javascript:pageTotal.getDate(” + pageTotal.current + “,” + type + “);’ class=’on’>” + i + “</a>”);
                        } else {
                            $(“#pages”).append(“<a href=’javascript:pageTotal.getDate(” + i + “,” + type + “);’>” + i + “</a>”);
                        }
                    }
                    if (end != pageTotal.total) {
                        $(“#pages”).append(“&nbsp;&nbsp;&nbsp;&nbsp;<span>…</span>”);
                    }
                    $(“#pages”).append(“&nbsp;&nbsp;&nbsp;&nbsp;<a href=’javascript:pageTotal.getDate(” + pageTotal.last + “,” + type + “);’>尾页</a>”);
                }
            }
        };
    </script>
</head>
<body>
    <h1>无刷新分页</h1>
    <div id=”wrap”>
        <table class=”tbpage”>
            <thead>
                <tr>
                    <th width=”80px”>姓名</th>
                    <th>密钥</th>
                    <th width=”40px”>年龄</th>
                </tr>
            </thead>
            <tbody id=”tbcontent”>
            </tbody>
        </table>
        <div id=”pages”></div>
    </div>
</body>
</html>

前端开发在手机上直接显示的吗|前端开发经验总结|商城前端开发实训总结

赞(0)
前端开发者 » 前端开发怎么实现异步刷新分页
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论