<head runat="server">
<title></title>
<style type="text/css">
table
{
border:1px solid gray;
width:700px;
}
table tr th,td
{
border:1px solid gray;
}
</style>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var pageindex = 1;
var pagesize = 10;
var pagemax;
pagemaxx();
LoadArticleJs();
/*页面首次加载时调用后台的LoadArticle方法填充第一页的数据*/
function pagemaxx() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/pagemax",
data: "{pagesize:" + pagesize +"}",
success: function (date) {
pagemax = date.d;
dangqian();
},
error: function () {
alert('获取数据失败');
}
})
}
function dangqian()
{
$('#Label1').text( pageindex + "/" + pagemax);
}
function LoadArticleJs() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/LoadArticle",
data: "{pageindex:" + pageindex + ",pagesize:" + pagesize + "}",
success: function (data) {
/*通过调试发现data.d就是一个集合,包含10个元素,每个元素里面都有ArticleId,ArticleTitle,ArticleContent,UserName四个属性,所以通过拼接表格的方式将数据呈现出来*/
var strtable = "<table>";
strtable += "<tr><th>编号</th><th>标题</th><th>内容</th><th>作者</th></tr>"
for (var i = 0; i < data.d.length; i++) {
strtable += "<tr><td>" + data.d[i].ArticleId + "</td><td>" + data.d[i].ArticleTitle + "</td><td>" + data.d[i].ArticleContent + "</td><td>" + data.d[i].UserName + "</td></tr>";
}
strtable += "</table>";
$('#divArticle table').remove();
$('#divArticle').append(strtable);
},
error: function () {
alert('获取数据失败');
}
})
}
//下一页
$('#btnFirst').bind('click', function () {
pageindex=1;
LoadArticleJs();
dangqian();
})
$('#btnPre').bind('click', function () {
if (pageindex > 1)
{
pageindex--;
LoadArticleJs();
dangqian();
}
})
$('#btnNext').bind('click', function () {
if (pageindex < pagemax)
{
pageindex++;
LoadArticleJs();
dangqian();
}
})
$('#btnLast').bind('click', function () {
pageindex = pagemax;
LoadArticleJs();
dangqian();
})
$('#btngo').bind('click', function () {
pageindex = $('#txt').val();
if (pagemax > pageindex > 0) {
LoadArticleJs();
dangqian();
}
else {
alert('超出总页数,请重新输入');
}
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="divArticle">
</div>
<div>
<input id="btnFirst" type="button" value="第一页" />
<input id="btnPre" type="button" value="上一页" />
<input id="btnNext" type="button" value="下一页" />
<input id="btnLast" type="button" value="最后一页" /><br />
<input id="txt" type="text" /><asp:Label ID="Label1" runat="server" Text=""></asp:Label><input id="btngo" type="button" value="Go" />
</div>
</div>
</form>
</body>
</html>
在WebService1.asmx中写
[WebMethod]
public int pagemax(int pagesize)
{
int pagemax1;
string sqlstr = ConfigurationManager.ConnectionStrings["sqlserverstr"].ConnectionString;
SqlConnection con = new SqlConnection(sqlstr);
con.Open();
SqlCommand cmd = con.CreateCommand();
cmd.CommandText = "select count(*) from T_Article";
int totalcount = Convert.ToInt32(cmd.ExecuteScalar());
cmd.Dispose();
con.Close();
con.Dispose();
if (totalcount % pagesize == 0)
{
pagemax1 = totalcount / pagesize;
}
else
{
pagemax1 = totalcount / pagesize + 1;
}
return pagemax1;
}
[WebMethod]
public List<Article> LoadArticle(int pageindex, int pagesize)
{
DataTable dt = new DataTable();
string sqlstr = ConfigurationManager.ConnectionStrings["sqlserverstr"].ConnectionString;
using (SqlConnection conn = new SqlConnection(sqlstr))
{
using (SqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = "select * from (select ROW_NUMBER() over(order by ArticleId) as rownumber,* from T_Article)t where t.rownumber>(@pageindex-1)*@pagesize and t.rownumber<=@pageindex*@pagesize";
cmd.Parameters.AddWithValue("@pageindex", pageindex);
cmd.Parameters.AddWithValue("@pagesize", pagesize);
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
adapter.Fill(dt);
}
}
List<Article> list = new List<Article>();
if (dt.Rows.Count>0)
{
foreach (DataRow row in dt.Rows)
{
Article myariticle = new Article();
myariticle.ArticleId = row["ArticleId"].ToString();
myariticle.ArticleTitle = row["ArticleTitle"].ToString();
myariticle.ArticleContent = row["ArticleContent"].ToString();
myariticle.UserName = row["UserName"].ToString();
list.Add(myariticle);
}
}
return list;
}
}
public class Article
{
public string ArticleId { get; set; }
public string ArticleTitle { get; set; }
public string ArticleContent { get; set; }
public string UserName { get; set; }
}
}