Jquery结合Ajax和Web服务使用三层架构实现无刷新分页
在Web服务里代码
/// <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<Model.T_Student> GetListAjax(int pageindex,int pagesize) { BLL.T_Student bll = new BLL.T_Student(); int count= bll.GetRecordCount(""); DataTable dt = bll.GetListDataTable(pageindex, pagesize); List<Model.T_Student> li = new List<Model.T_Student>(); string name = ""; int age; string gender = ""; foreach (DataRow row in dt.Rows) { name = row["sName"].ToString(); age =Convert.ToInt32(row["sAge"]); gender = row["sGender"].ToString(); Model.T_Student model = new Model.T_Student(); model.sName = name; model.sAge = age; model.sGender = gender; li.Add(model); } return li; } [WebMethod] public int GetLastPageindex(int pagesize) { BLL.T_Student bnews = new BLL.T_Student(); int totalcount = bnews.GetRecordCount(""); if (totalcount % pagesize == 0) { return totalcount / pagesize; } else { return totalcount / pagesize + 1; } } }
html页代码
<script src="jquery/Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var pagesize = 6; var pageindex = 1; var lastindex = 1; function loaddata() { $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetListAjax", data: "{pageindex:" + pageindex + ",pagesize:" + pagesize + "}", success: function (result) { // if (result.d.length % pagesize == 0) { // lastindex = result.d.length / pagesize; // } // else { // lastindex = result.d.length / pagesize + 1; // } var biaoqian = "<table>"; biaoqian += "<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>"; for (var i = 0; i < result.d.length; i++) { biaoqian += "<tr>"; biaoqian += "<td>" + result.d[i]["sName"] + "</td>"; biaoqian += "<td>" + result.d[i]["sGender"] + "</td>"; biaoqian += "<td>" + result.d[i]["sAge"] + "</td>"; biaoqian += "</tr>"; } biaoqian += "</table>"; $('#divtable').html(biaoqian); } }) } function aaa() { $.ajax({ type: "post", contentType: "application/json", url: "WebService1.asmx/GetLastPageindex", data: "{pagesize:" + pagesize + "}", success: function (result) { lastindex = result.d; //alert(lastindex); } }) } loaddata(); aaa(); $("a:eq(0)").click(function () { pageindex = 1; loaddata(); }) $("a:eq(1)").click(function () { if (pageindex > 1) { pageindex--; loaddata(); } }) $("a:eq(2)").click(function () { if (pageindex < lastindex) { pageindex++; loaddata(); } }) $("a:eq(3)").click(function () { pageindex = lastindex; loaddata(); }) }) </script>
<div id="divtable"></div> <div><a href="#">第一页</a><a href="#">上一页</a><a href="#">下一页</a><a href="#">最后一页</a><input id="txtPageindex" type="text" /><a href="#">Go</a></div>
Bll层
private readonly 分页一小时内完成.SQLServerDAL.T_Student dal = new SQLServerDAL.T_Student(); public T_Student() {} public DataTable GetListDataTable(int PageIndex, int PageSize) { return dal.GetListDataTable(PageSize, PageIndex); }
DAL层
public DataTable GetListDataTable(int PageSize, int PageIndex) { SqlParameter[] parameters = { new SqlParameter("@sindex", SqlDbType.Int), new SqlParameter("@ssize", SqlDbType.Int), }; parameters[0].Value = PageIndex; parameters[1].Value = PageSize; return DbHelperSQL.RunProcedureDataTable("usp_student1", parameters); }
DataAccess
public static DataTable RunProcedureDataTable(string storedProcName, IDataParameter[] parameters) { SqlConnection connection = new SqlConnection(connectionString); DataTable dt = new DataTable(); connection.Open(); SqlCommand command = BuildQueryCommand(connection, storedProcName, parameters); command.CommandType = CommandType.StoredProcedure; SqlDataAdapter adapter = new SqlDataAdapter(command); adapter.Fill(dt); connection.Close(); return dt; }