• 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
  • 当前位置: 山茶花美文网 > 人生哲理 > 正文

    【html无刷新分页前端代码】html分页代码实例

    时间:2018-08-11来源:山茶花美文网 本文已影响 山茶花美文网手机站
    <!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/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>
    
    • 【html无刷新分页前端代码】html分页代码实例 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全