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

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