欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

无刷新分页前端代码

程序员文章站 2022-09-11 10:18:43
[html]     [html]  

<!DOCTYPE html>  

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

<head>   www.2cto.com

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

    <title></title>  

    <script src="../Script/jquery-1.8.3.js" type="text/javascript"></script>  

    <script type="text/javascript">  

        $(function () {  

            $.post("Test.ashx", { "action": "getpagecount" }, function (data, status) {  

                for (var i = 1; i <= data; i++) {  

                    var td = $("<td><a href=''>" + i + "</a></td>");  

                    $("#trpage").append(td);  

                }  

  

                $("#trpage td").click(function (e) {  

  

                    e.preventDefault();  

  

                    $.post("Test.ashx", { "action": "getpagedata", "pagenum": $(this).text() }, function (data, status) {  

                        var comments = $.parseJSON(data);  

  

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

  

                        for (var i = 0; i < comments.length; i++) {  

                            var comment = comments[i];  

                            var li = $("<li>" + comment.OrderID + "--" + comment.OrderDate + "</li>");  

                            $("#ulorderlist").append(li);  

                        }  

  

                    });  

  

                })  

            });  

  

  

        });  

    </script>  

</head>  

<body>  

    <ul id="ulorderlist">  

    </ul>  

    <table>  

        <tr id="trpage">  

        </tr>  

    </table>  

</body>  

</html>