之前很少會用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><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>
以上就是關于如何利用JQuery方便實現基于Ajax的數據查詢、排序和分頁功能的思路，希望本文可以給大家帶來啟發和靈感。
新聞熱點
疑難解答
