利用JQuery方便实现基于Ajax的数据查询、排序和分页功能

利用JQuery方便实现基于Ajax的数据查询、排序和分页功能2007-04-26之前很少会用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>

<tr>

<tr>

CompanyName</td>

ShipCity</td>

</tr>

<tr>

OrderDate</td>

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>