之前很少会用javascript去实现页功能主要怕麻烦，但了解jquery后这种想法发生了变化；有了这样的脚本组件就可以在编写脚本时方便和html隔离出来，这样编写高重用性的脚本就更方便。下面就是介绍在学习jquery过程中编写的基于ajax的数据查询、排序和分页功能的复用脚本，只要遵循脚本的某些规则描述html把脚本文件引入就可以方便实现以上描述的功能。
先看下实现功能的代码：
/**应用脚本规则：
引用脚本: jquery脚本和jquery的form插件脚本
form的id: viewform
显示数据的p的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时只需要遵循描述的规则即可，你并不需要在编写任何脚本代码；只需要把脚本添加到页面里：