当前位置:编程学习 > html/css >>

无刷新分页前端代码

[html]  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>   www.zzzyk.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>  
补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,