无刷新分页 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>