利用JQuery方便实现基于Ajax的数据查询、排序和分页功能

之前很少会用JavaScript去实现页功能主要怕麻烦，但了解JQuery后这种想法发生了变化；有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来，这样编写高重用性的脚本就更方便。下面就是介绍在学习JQuery过程中编写的基于Ajax 的数据查询、排序和分页功能的复用脚本，只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能。

先看下实现功能的脚代码：

/**应用脚本规则：

引用脚本: 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>

<tr>

<tr>

CompanyName</td>

ShipCity</td>

</tr>

<tr>

OrderDate</td>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</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;

%>

<% if(dataview.PageCount >0){%>

<tr>

当前<%=dataview.PageIndex+1%>页／共<%=dataview.PageCount %>页

</td>

</tr>

<%}%>

<tr>

<a href="#" orderfield="<%=dataview.GetOrderInfo("CompanyName")%>" >CustomerName</a></td>

<a href="#" orderfield="<%=dataview.GetOrderInfo("Employees.EmployeeID")%>" >EmployeeName</a></td>

<a href="#" orderfield="<%=dataview.GetOrderInfo("OrderDate")%>" >OrderDate</a></td>

<a href="#" orderfield="<%=dataview.GetOrderInfo("RequiredDate")%>" >RequireDate</a></td>

ShipAddress</td>

ShipCity</td>

SipCountry</td>

</tr>

<%foreach(Order_v item in dataview.DataItems)

{ %>

<tr>

</td>

</td>

</td>

</td>

</td>

</td>

</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>();

}

下载例程代码和脚源码:http://www.cnblogs.com/Files/henryfan/Ajax SearchDataSample.rar

返回炫浪学院

上一篇：Ajax核心：XMLHTTP组件相关技术资料下一篇：网页数据的实时刷新