给表格分页
给表格分页,想过但是从来没有用过,而且使用超链接来实现分页的,头都大了!
<% System.Collections.Generic.List<CompanyModel.New> list = show(); foreach (CompanyModel.New name in list) { %> <tr> <td width="24" height="35"><img src="image/64.gif"/> </td> <td><a href="ShowNewsInfo.aspx?id=<%=name.Id %>"> <%=name.Title %></a> </td> <td width="78" align="right"> [<%=name.Newtime.ToShortDateString()%>]</td> <% } %>
前台绑定数据,调用后台的show()方法;
<td height="46" colspan="3" align="center" valign="middle" class="fanye">
<a href="#">首页</a>
<a href="#">上一页</a>
<% int count = Count() / 10; int num = count % 10; if (count > 0)
{
if (count == 0)
{
for (int i = 1; i <= count; i++)
{
%>
<a href="#" id="go"><%=i%></a>
<% }
}
else {
for (int i = 1; i <= count + 1; i++)
{
%>
<a href="#" id="go"><%=i%></a>
<%
}
}
}%>
<a href="#">下一页</a>
<a href="#">尾页</a></td>
出现页数;
实现分页我使用jquery和ajax来实现的
代码如下:
<script language="javascript" type="text/javascript"> $(function() { $("a[id]").click(function() { var count = $(this).text(); $.ajax({ type: "POST", url: "News.aspx/bind", //方法传递参数 data: "{'count':'" + count + "'}", contentType: "application/json;charset=utf-8", dataType: "json", success: function(message) { window.location.reload(); }, error: function(err) { alert("ajax出现错误,请查找错误"); } }); }); $("a").click(function() { $(this).each(function() { if ($(this).text() == "首页") { $.ajax({ type: "POST", url: "News.aspx/top", //方法传递参数 contentType: "application/json;charset=utf-8", dataType: "json", success: function(message) { window.location.reload(); }, error: function(err) { alert("请您重新操作"); } }); } if ($(this).text() == "尾页") { $.ajax({ type: "POST", url: "News.aspx/Last", //方法传递参数 contentType: "application/json;charset=utf-8", dataType: "json", success: function(message) { window.location.reload(); }, error: function(err) { } }); } if ($(this).text() == "下一页") { $.ajax({ type: "POST", url: "News.aspx/GoLast", //方法传递参数 contentType: "application/json;charset=utf-8", dataType: "json", success: function(message) { //成功时实现一个回调函数 window.location.reload(); }, error: function(err) { alert("请您重新操做"); } }); } if ($(this).text() == "上一页") { $.ajax({ type: "POST", url: "News.aspx/GoTop", //方法传递参数 contentType: "application/json;charset=utf-8", dataType: "json", success: function(message) { window.location.reload(); }, error: function(err) { } }); } }) }) }) </script>
调用的后台方法是:
//分页显示新闻信息 public List<New> show() { NewsBll newsbll = new NewsBll(); return newsbll.ShowNews(start,end); } //显示新闻的总条数 public int Count() { NewsBll newsbll = new NewsBll(); return newsbll.CountNew(); } [WebMethod]//实现固定的跳转 public static void bind(int count) { NewsBll bll=new NewsBll (); start = (count - 1) * 10 + 1; end = start + 9; if (end > bll.CountNew())//判断最后一也数据是否是一整页; { end = bll.CountNew(); } } [WebMethod]//首页 public static void Top() { start = 1; end = 10; } [WebMethod]//尾页 public static void Last() { NewsBll bll = new NewsBll(); int count = bll.CountNew(); int num = count % 10; if (num == 0) { start = (count - 1) * 10 + 1; end = count; } else { start = (count / 10) * 10 + 1; end = count; } } [WebMethod]//下一页 public static void GoLast() { NewsBll bll = new NewsBll(); if (end < bll.CountNew()) { start += 10; end += 10; } } [WebMethod]//向上一页 public static void GoTop() { if (start != 1) { start -= 10; end -= 10; } }
IE 6上时可以执行的,但是再高点的就没有测试了,如果您有别的好的方法请您指出来,菜鸟向您学习!