JQuery+Ajax实现数据查询、排序和分页功能
之前很少会用javascript去实现页功能主要怕麻烦，但了解JQuery后这种想法发生了变化；有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来，这样编写高重用性的脚本就更方便。下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询、排序和分页功能的复用脚本，只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能。
先看下实现功能的代码：
/**应用脚本规则：
引用脚本:JQuery脚本和JQuery的form插件脚本
Form的ID:viewform
显示数据的div的ID:listview
分页按钮HTML属性:pageindex="1"
排序按钮HTML属性:orderfield="employeeiddesc";
提效排序字段Input的ID,Name:orderfield
提交分页索引Input的ID,Name:pageindex
**/
functiononInitPaging()
{
$("#listview").find("[@orderfield]").each(function(i)
{
varordervalue=$(this).attr("orderfield");
$(this).click(function()
{
$("#orderfield").val(ordervalue);
onSubmitPage();
}
);
}
);
$("#listview").find("[@pageindex]").each(function(i)
{
varpiValue=$(this).attr("pageindex");
$(this).click(function()
{
$("#pageindex").val(piValue);
onSubmitPage();
}
);
}
);
}
functiononSubmitPage()
{
varoptions={
success:functionSubmitSuccess(data){
$("#listview").html(data);
onInitPaging();
}
};
$('#viewform').ajaxSubmit(options);
}
$(document).ready(
function()
{
$("#search").click(function(){
$("#pageindex").val('0');
onSubmitPage()
});
onSubmitPage();
}
);
约束规则巧用了html的自定义属性，以上代码描述查询，排序和分页的ajax提交处理。在编写HTML时只需要遵循描述的规则即可，你并不需要在编写任何脚本代码；只需要把脚本添加到页面里：
<scriptsrc=jquery-latest.js></script> <scriptsrc=form.js></script> <scriptsrc=calendar.js></script> <scriptsrc=calendar-setup.js></script> <scriptsrc="lang/calendar-en.js"></script> <scriptsrc=pagination.js></script> <formid="viewform"method="post"action="FrmOrderView.aspx"> <inputid="orderfield"name="orderfield"type="hidden"value=""/> <inputid="pageindex"name="pageindex"type="hidden"value="0"/> <tableborder="0"cellpadding="0"cellspacing="0"style="width:100%;height:100%"> <tr> <tdvalign="top"align="left"> <tablewidth="550"cellpadding="0"cellspacing="0"> <tr> <tdstyle="width:63px;height:17px;background-color:gainsboro;"> CompanyName</td> <tdstyle="width:114px;height:17px;"> <inputid="Text1"name="companyname"type="text"/></td> <tdstyle="width:63px;height:17px;background-color:gainsboro;"> ShipCity</td> <tdstyle="width:126px;height:17px;"> <inputid="Text2"name="shipcity"type="text"/></td> </tr> <tr> <tdstyle="width:63px;height:14px;background-color:gainsboro;"> OrderDate</td> <tdstyle="width:240px;height:14px;"align="left"> <inputid="Text3"name="OrderDate_Begin"type="text"/> <inputid="button1"DateField="Text3"type="button"value="..."/></td> <tdstyle="width:63px;height:14px;background-color:gainsboro;"> </td> <tdstyle="width:240px;height:14px;"align="left"> <inputid="Text4"type="text"name="OrderDate_End"/> <inputid="button2"DateField="Text4"type="button"value="..."/></td> </tr> <tr> <tdstyle="height:50px"align="left"colspan="4"> <inputid="search"type="button"value="Search"/></td> </tr> </table> </td> </tr> <tr> <tdheight="99%"> <divid="listview"></div> </td> </tr> </table> </form>
以上就是关于如何利用JQuery方便实现基于Ajax的数据查询、排序和分页功能的思路，希望本文可以给大家带来启发和灵感。