AJAX实现无刷新分页(三层\存储过程\WebService\AJAX\Jquery)

前端之家收集整理的这篇文章主要介绍了AJAX实现无刷新分页(三层\存储过程\WebService\AJAX\Jquery)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前台html页

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table
{
border:1px solid #333;
}
table td
{
border:1px solid #333;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var pageindex = 1;
var pagesize = 10;
var lastpageindex = 1;
function fenye() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetListAjax",
data: "{pagesize:" + pagesize + ",pageindex:" + pageindex + "}",
success: function (result) {
//alert(result.d[0].NewsTitle);
var sb1 = '<table>';
sb1 += "<tr><td>编号</td><td>标题</td><td>内容</td><td>创建时间</td></tr>";
for (var i = 0; i < result.d.length; i++) {

sb1 += '<tr>';
sb1 += '<td>' + result.d[i].Id + '</td>';
sb1 += '<td>' + result.d[i].NewsTitle + '</td>';
sb1 += '<td>' + result.d[i].NewsContent + '</td>';
sb1 += '<td>' + result.d[i].CreateTime + '</td>';
sb1 += '<tr>';
}
sb1 += '</table>';
$('#mydiv').html(sb1);
}
})

}

$.ajax({
type: "post",
url: "WebService1.asmx/pageindexcount",
data: "{pagesize:" + pagesize + "}",
success: function (result) {

lastpageindex = result.d;
}
})
fenye();
$('a:eq(0)').click(function () {
pageindex = 1;
fenye();
})
$('a:eq(1)').click(function () {
if (pageindex > 1) {
pageindex--;
fenye();
}

})
$('a:eq(2)').click(function () {
if (pageindex < lastpageindex) {
pageindex++;
fenye();
}

})
$('a:eq(3)').click(function () {
pageindex = lastpageindex;
fenye();
})
$('a:eq(4)').click(function () {
pageindex = $('#txtpageindex').val();
fenye();
})

})

</script>
</head>
<body>
<div id="mydiv"></div>
<div>
<a href="#">第一页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
<a href="#">最后一页</a>
<input type="text" id="txtpageindex"/>
<a href="#">GO</a>
</div>
</body>
</html>

WebService代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;

namespace 分页
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolBoxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public List<WebAJAX.Model.T_News1> GetListAjax(int pagesize,int pageindex)
{
WebAJAX.BLL.T_News1 bnews = new WebAJAX.BLL.T_News1();
DataTable dt = bnews.GetListDataTable(pagesize,pageindex);
List<WebAJAX.Model.T_News1> list = new List<WebAJAX.Model.T_News1>();
int id;
string newscontent = "";
string newstitle = "";
DateTime createtime;
for (int i = 0; i < dt.Rows.Count; i++)
{
id = Convert.ToInt32(dt.Rows[i]["Id"]);
newstitle = dt.Rows[i]["NewsTitle"].ToString();
newscontent = dt.Rows[i]["NewsContent"].ToString();
createtime = Convert.ToDateTime(dt.Rows[i]["CreateTime"]);
WebAJAX.Model.T_News1 news = new WebAJAX.Model.T_News1();
{
news.Id = id;
news.NewsTitle = newstitle;
news.NewsContent = newscontent;
news.CreateTime = createtime;
};
list.Add(news);
}
return list;

}
[WebMethod]
public int pageindexcount(int pagesize)
{
var lastpageindex = 1 ;
WebAJAX.BLL.T_News1 pagecount = new WebAJAX.BLL.T_News1();
var lastpage = pagecount.GetRecordCount("");
if (lastpage % pagesize == 0)
{
lastpageindex = lastpage / pagesize;
}
else
{
lastpageindex = lastpage / pagesize + 1;
}
return lastpageindex;
}
}
}

存储过程代码

create Proc pro_fenye
@pagesize int,
@pageindex int
as
select * from(select ROW_NUMBER() over(order by Id) as rownumber,Id,NewsTitle,SUBSTRING(NewsContent,20)as NewsContent,CreateTime from T_News1) T
where rownumber>(@pageindex-1)*@pagesize and rownumber<=@pagesize*@pageindex
go

手写三层代码

BLL

//分页方法
public DataTable GetListDataTable(int pagesize,int pageindex)
{
return dal.GetListDataTable(pagesize,pageindex);
}

DAL

<summary>
分页获取数据列表
</summary>*/
public DataTable GetListDataTable(int PageSize,int PageIndex)
{
sqlParameter[] parameters = {
new sqlParameter("@PageSize",sqlDbType.Int),
new sqlParameter("@PageIndex",sqlDbType.Int)
};

parameters[0].Value = PageSize;
parameters[1].Value = PageIndex;

return DbHelpersql.RunProcedureDataTable("pro_fenye",parameters);
}

sqlhelper

//分页执行存储过程返回DataTable
public static DataTable RunProcedureDataTable(string storedProcName,IDataParameter[] parameters)
{
using (sqlConnection connection = new sqlConnection(connectionString))
{
DataTable dt = new DataTable();
connection.Open();
sqlDataAdapter sqlDA = new sqlDataAdapter();
sqlDA.SelectCommand = BuildQueryCommand(connection,storedProcName,parameters);
sqlDA.Fill(dt);
connection.Close();
return dt;
}
}

猜你在找的Ajax相关文章