快捷導(dǎo)航

JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢、排序和分頁(yè)功能

更新時(shí)間：2015年09月27日 15:18:32 投稿：lijiao

這篇文章介紹了利用JQuery方便實(shí)現(xiàn)基于Ajax的數(shù)據(jù)查詢、排序和分頁(yè)功能，需要的朋友可以參考下

之前很少會(huì)用javascript去實(shí)現(xiàn)頁(yè)功能主要怕麻煩，但了解JQuery后這種想法發(fā)生了變化；有了這樣的腳本組件就可以在編寫(xiě)腳本時(shí)方便和HTML隔離出來(lái)，這樣編寫(xiě)高重用性的腳本就更方便。下面就是介紹在學(xué)習(xí)JQuery過(guò)程中編寫(xiě)的基于Ajax的數(shù)據(jù)查詢、排序和分頁(yè)功能的復(fù)用腳本，只要遵循腳本的某些規(guī)則描述HTML把腳本文件引入就可以方便實(shí)現(xiàn)以上描述的功能。
先看下實(shí)現(xiàn)功能的代碼：

/**應(yīng)用腳本規(guī)則：
引用腳本: JQuery腳本和JQuery的form插件腳本
Form的ID: viewform
顯示數(shù)據(jù)的div的ID: listview
分頁(yè)按鈕HTML屬性: pageindex="1"
排序按鈕HTML屬性: orderfield="employeeid desc";
提效排序字段Input的ID,Name: orderfield
提交分頁(yè)索引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();
}
);

約束規(guī)則巧用了html的自定義屬性，以上代碼描述查詢，排序和分頁(yè)的ajax提交處理。在編寫(xiě)HTML時(shí)只需要遵循描述的規(guī)則即可，你并不需要在編寫(xiě)任何腳本代碼；只需要把腳本添加到頁(yè)面里：

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

以上就是關(guān)于如何利用JQuery方便實(shí)現(xiàn)基于Ajax的數(shù)據(jù)查詢、排序和分頁(yè)功能的思路，希望本文可以給大家?guī)?lái)啟發(fā)和靈感。

您可能感興趣的文章: