JQuery实现基于Ajax的数据查询、排序和分页功能
来源:互联网 发布:java 中getbean 编辑:程序博客网 时间:2024/06/04 20:22
/**应用脚本规则:
引用脚本: JQuery脚本和JQuery的form插件脚本
Form的ID: viewform
显示数据的div的ID: listview
分页按钮HTML属性: pageindex="1"
排序按钮HTML属性: orderfield="employeeid desc";
提效排序字段Input的ID,Name: orderfield
提交分页索引Input的ID,Name: pageindex
**/
function onInitPaging()
{
$("#listview").find("[@orderfield]").each(function(i)
{
var ordervalue = $(this).attr("orderfield");
$(this).click(function()
{
$("#orderfield").val(ordervalue);
onSubmitPage();
}
);
}
);
$("#listview").find("[@pageindex]").each(function(i)
{
var piValue = $(this).attr("pageindex");
$(this).click(function()
{
$("#pageindex").val(piValue);
onSubmitPage();
}
);
}
);
}
function onSubmitPage()
{
var options = {
success: function SubmitSuccess(data){
$("#listview").html(data);
onInitPaging();
}
};
$('#viewform').ajaxSubmit(options);
}
$(document).ready(
function()
{
$("#search").click(function(){
$("#pageindex").val('0');
onSubmitPage()
});
onSubmitPage();
}
);
约束规则巧用了html的自定义属性,以上代码描述查询,排序和分页的ajax提交处理。在编写HTML时只需要遵循描述的规则即可,你并不需要在编写任何脚本代码;只需要把脚本添加到页面里: <script src=jquery-latest.js></script> <script src=form.js></script> <script src=calendar.js></script> <script src=calendar-setup.js></script> <script src="lang/calendar-en.js"></script> <script src=pagination.js></script> <form id="viewform" method="post" action="FrmOrderView.aspx"> <input id="orderfield" name="orderfield" type="hidden" value="" /> <input id="pageindex" name="pageindex" type="hidden" value ="0"/> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%"> <tr> <td valign="top" align="left"> <table width="550" cellpadding="0" cellspacing="0"> <tr> <td style="width: 63px; height: 17px; background-color: gainsboro;"> CompanyName</td> <td style="width: 114px; height: 17px;"> <input id="Text1" name="companyname" type="text" /></td> <td style="width: 63px; height: 17px; background-color: gainsboro;"> ShipCity</td> <td style="width: 126px; height: 17px;"> <input id="Text2" name="shipcity" type="text" /></td> </tr> <tr> <td style="width: 63px; height: 14px; background-color: gainsboro;"> OrderDate</td> <td style="width: 240px; height: 14px;" align="left"> <input id="Text3" name="OrderDate_Begin" type="text" /> <input id="button1" DateField="Text3" type="button" value="..." /></td> <td style="width: 63px; height: 14px; background-color: gainsboro;"> </td> <td style="width: 240px; height: 14px;" align="left"> <input id="Text4" type="text" name="OrderDate_End" /> <input id="button2" DateField="Text4" type="button" value="..." /></td> </tr> <tr> <td style="height: 50px" align="left" colspan="4"> <input id="search" type="button" value="Search" /></td> </tr> </table> </td> </tr> <tr> <td height="99%"> <div id="listview"></div> </td> </tr> </table> </form>
数据提供页面:
<%@ Page Language="C#" AutoEventWireup="true" Inherits="HFSoft.MVC.DataViewContext" %>
<%@ Import Namespace="NorthWind.Entities" %>
<%
HFSoft.MVC.IDataViewContext dataview = (HFSoft.MVC.IDataViewContext)this;
%>
<table width="100%" >
<% if(dataview.PageCount >0){%>
<tr>
<td colspan="7" style="height: 20px">
<a href="#" pageindex="0" >首页</a>
<a href="#" pageindex="<% =dataview.PrevPage%>">上一页</a>
<a href="#" pageindex="<% =dataview.NextPage %>" >下一页</a>
<a href="#" pageindex="<% =dataview.PageCount-1%>">末页</a>
当前<%=dataview.PageIndex+1%>页/共<%=dataview.PageCount %>页
</td>
</tr>
<%}%>
<tr>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("CompanyName")%>" >CustomerName</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("Employees.EmployeeID")%>" >EmployeeName</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("OrderDate")%>" >OrderDate</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
<a href="#" orderfield="<%=dataview.GetOrderInfo("RequiredDate")%>" >RequireDate</a></td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
ShipAddress</td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
ShipCity</td>
<td style="width: 100px; font-weight: bold; background-color: activeborder;">
SipCountry</td>
</tr>
<%foreach(Order_v item in dataview.DataItems)
{ %>
<tr>
<td style="width: 100px"><%=dataview.ToValue(item.CustomerName)%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.EmployeeName)%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.OrderDate, "{0:d}")%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.RequiredDate, "{0:d}")%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.ShipAddress)%>
</td>
<td style="width: 100px"><%=dataview.ToValue(item.ShipCity)%>
</td>
<td style="width: 100px"><% =dataview.ToValue(item.ShipCountry)%>
</td>
</tr>
<% } %>
</table>
数据提供页相关Controller代码:
[HFSoft.MVC.FormMapper("~/frmorderview.aspx")]
public void OrderView()
{
HFSoft.MVC.IDataViewContext viewcontext = (HFSoft.MVC.IDataViewContext)this.FormContext;
IExpression exp;
FieldAdapter[] orderby = null;
OrderSearch search = viewcontext.BindObject<OrderSearch>();
exp = search.GetExpression();
if (viewcontext.OrderField != null && viewcontext.OrderField != string.Empty)
{
orderby = new FieldAdapter[]{new FieldAdapter(viewcontext.OrderField, null)};
}
Region region = new Region(viewcontext.PageIndex * 10, viewcontext.PageIndex * 10+10);
viewcontext.DataItems = exp.List<Order_v>(region, orderby);
viewcontext.PageSize = 10;
viewcontext.RecordCount = exp.CountOf<Order_v>();
}
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- JQuery实现基于Ajax的数据查询、排序和分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- jQuery实现的分页功能,包括ajax请求,后台数据
- 实现ASPxGridView基于AJAX和自定义数据源的分页查询
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!
- 用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
- 用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
- js+jQuery+ajax,处理数据和功能的实现
- jquery实现ajax查询后台数据列表,支持分页
- Ajax实现数据分页功能
- 基于SSH2和Ajax的分页实现
- 带有查询和排序功能的jquery分页插件——DataTables
- 列表分页查询的实现jquery 和Ajax的联合使用 HTML页面
- jquery easyUI ajax加载数据分页功能
- jQuery+AJAX实现纯js分页功能
- jQuery插件 dataTable Ajax分页功能实现
- 基于Jquery+Ajax+Json实现分页显示
- JSP页面访问MySQL数据库(1)
- foef与eof
- Authorization Object
- SQL 2005迁移数据库后出现错误15023:当前数据库中已存在用户或角色
- 如何用VB访问并设置环境变量
- JQuery实现基于Ajax的数据查询、排序和分页功能
- url里锚点和input控件冲突
- Asp.net 访问 共享目录 远程存储数据库
- C语言的知识积累
- 从表counter中读取数据字段car,然后全部插入到表counterss!!
- SQL存储过程事务和优化方法(包括查询方式语句结合)
- jsp开发技术应用的29个注意事项
- java执行jar包中的class
- 使用 SQLite3 访问Blob字段