• 无刷新分页 Ajax,JQuery,Json


    1.数据库设计
    字段:Id(int) , Msg(varchar(MAX)) , PostDate(datetime)

    2.自定义SQL查询方法(强类型DataSet)

    //SelectCount()方法,用于查询总条数
    select count(*) from T_Posts

    //GetPageData(startRowIndex,endRowIndex)方法,用于查询指定范围,分页功能,
    由于不支持over语句,因此需手动增加参数,方法-右键-属性,里面的 Parameters
    增加startRowIndex 和 endRowIndex,类型为 Int32
    select * from
    (
       select Id, Msg,PostDate,Row_Number()over(order by PostDate)rownum from T_Posts
    )t
    where t.rownum>=@startRowIndex and t.rownum<=@endRowIndex

    3.HTML设置

    <ul id="ulComment"></ul>
    <table>
    <tr id="trPage"></tr>
    </table>

    4.处理页设置 WSXFY.ashx

    public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                string action = context.Request["action"];   //取得客户提交上来的 action 值
                if (action == "getpagecount")         //此为查询数据总条数
                {
                    var adapter = new T_PostsTableAdapter();
                    int count = adapter.SelectCount().Value; //利用自定义SQL方法得到条数
                    int pagecount = count / 10;         //条数除以10,得到页数(10条一页)
                    if (count % 10 != 0)       //取条数的余数,没有被10整除的,都加1
                    {
                        pagecount++;
                    }
                    context.Response.Write(pagecount);     //输出页数
    
                }
                else if(action == "getpagedata")         //此为查询详细数据
                {
                    string pagenum = context.Request["pagenum"];    //得到当前页号
                    int PageNum = Convert.ToInt32(pagenum);        //转换成INT型
                    var adapter = new T_PostsTableAdapter();    //创建DataSet
                    var data = adapter.GetPageData((PageNum - 1) * 10 + 1,(PageNum) * 10);
                                  //使用自定义SQL方法,得到条数范围
                    List<Comment> list = new List<Comment>(); //创建List类型为Comment
                    foreach (var row in data)          //遍历每一条数据
                    {
       list.Add(new Comment() { Msg = row.Msg, PostDate = row.PostDate.ToShortDateString() });
                                  //将每条数据都增加到List中
                    }
                    JavaScriptSerializer jss = new JavaScriptSerializer(); //创建 Json
                    context.Response.Write(jss.Serialize(list));       //将list转换成Json类型
                }
            }
            public class Comment              //创建一个类            
            {
                public string Msg { get; set; }
                public string PostDate { get; set; }
            }

    5. Javascript设置

    <script type="text/javascript">
        $.post("WSXFY.ashx", { "action": "getpagecount" }, function(data, status) {
            for (var i = 1; i <= data; i++) {
                var td = $("<td><a href=''>" + i + "</a></td>");  //循环输出页号
                $("#trPage").append(td);                  //将每一个td都附加上去
            }
         $("#trPage td").click(function(e) {
         e.preventDefault();            //阻止执行 href 的地址
           $.post("WSXFY.ashx", { "action": "getpagedata", "pagenum": $(this).text() },
           function(data, status) {
              var comments = $.parseJSON(data);    //利用 parseJSON 转换
              $("#ulComment").empty();        //清空ul
              for (var i = 0; i < comments.length; i++) {
              var comment = comments[i];
              var li = $("<li>" + comment.PostDate + ":" + comment.Msg + "</li>"); //生成数据
              $("#ulComment").append(li);
                    }
                });
            });
        });
    </script>
  • 相关阅读:
    Vue 介绍
    Django 组件-分页器
    Django 组件content_type
    DRF 解析器组件
    Django
    Django 组件-ModelForm
    Django 组件-用户认证
    Django 组件-中间件
    Django 组件-cookie与session
    Django CBV与FBV
  • 原文地址:https://www.cnblogs.com/xgao/p/4156100.html
Copyright © 2020-2023  润新知