您的位置：首页 > Web前端 > JavaScript

简单的js分页免刷新免跳转页面(即免&page=2页面跳转)

2016-11-28 14:12 246 查看

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Comment.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="Scripts/jquery.min.js"></script>

    <script type="text/javascript">

        //初始化

        $(function () {

            getList(1);//默认第1页

        });

        //清空

        function ClearTable() {

            $("#myTb").empty();

            var tbBody = "<tr><th>编号</th><th>评论</th><th>日期</th></tr>";

            $("#myTb").append(tbBody);

        }

        //查询数据(参数：页码)

        function getList(p) {

            ClearTable();

            var size = 5;//每页几行数据

            var index = p;//页码

            $.ajax({

                type: "Post",

                url: "index.aspx/GetComment",

                data: "{'pageSize':" + size + ",'pageIndex':" + index + "}",

                dataType: "json",

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    json = $.parseJSON(data.d);

                    for (var i in json) {

                        var tbBody = "";

                        tbBody += "<tr align='center'>";

                        tbBody += "<td>" + json[i].ComID + "楼</td>";

                        tbBody += "<td>";

                        tbBody += json[i].ComText;

                        if (json[i].ComPIC != "" && json[i].ComPIC != null) {

                            tbBody += "<br /><img width='50px' src='upload/" + json[i].ComPIC + "' />";

                        }

                        tbBody += "</td>";

                        tbBody += "<td>" + json[i].ComDate + "</td>";

                        tbBody += "</tr>";

                        $("#myTb").append(tbBody);

                    }

                    Pages(p); //分页按钮

                },

                error: function (err) { }

            });

        }

        //分页按钮

        function Pages(p) {

            $("#pager").html("");

            var size = 5;//每页几行数据

            var index = p;//页码

            $.ajax({

                type: "Post",

                url: "index.aspx/GetCommentCount",

                data: "{'name':'" + name + "'}",

                dataType: "json",

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    var count = data.d;

                    if (count != null && count != 0) {

                        var pagecount = parseInt(count / size);//求总页数

                        var temp = count % size;//判断判断最后一页

                        if (temp > 0) {

                            pagecount = pagecount + 1;

                        }

                        var page = "";

                        for (var i = 0; i < pagecount; i++) {

                            if ((i + 1) == index) {

                                page += "<a style='color:red;'>[" + (i + 1) + "]</a> ";

                            }

                            else {

                                page += "<a style='color:blue;' onclick='getList(" + (i + 1) + ")'>[" + (i + 1) + "]</a> ";

                            }

                        }

                        $("#pager").append(page);

                    }

                },

                error: function (err) { }

            });

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <%--<h3>评论</h3>--%>

            <table id="myTb" style="width: 350px; border: solid 1px; font-size: small;" border="1" cellspacing="0" cellpadding="0"></table>

            <span id="pager"></span>

            <br />

            <a href="#" onclick="getList(1)">刷新</a> | <a href="Comment.aspx" target="_top">我要评论</a>

        </div>

    </form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

简单的js分页 免刷新 免跳转页面(即免&page=2页面跳转)

简单的js分页免刷新免跳转页面(即免&page=2页面跳转)