下面图老师小编要跟大家分享利用JQuery方便实现基于Ajax的数据查询、排序和分页功能，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！
【 tulaoshi.com - Web开发 】
之前很少会用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)
{
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）var ordervalue = $(this).attr("orderfield");
$(this).click(function()
{
$("#orderfield").val(ordervalue);
onSubmitPage();
}
);
}
);
$("#listview").find("[@pageindex]").each(function(i)
{
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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时只需要遵循描述的规则即可，你并不需要在编写任何脚本代码；只需要把脚本添加到页面里：
http://school.cnd8.com
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"
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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.BindObjectOrderSearch();
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.ListOrder_v(region, orderby);
viewcontext.PageSize = 10;
viewcontext.RecordCount = exp.CountOfOrder_v();
}
下载例程代码和脚源码:http://www.cnblogs.com/Files/henryfan/AjaxSearchDataSample.rar
来源:https://www.tulaoshi.com/n/20160219/1627144.html
看过《利用JQuery方便实现基于Ajax的数据查询、排序和分页功能》的人还看了以下文章 更多>>
