JQuery Ajax implements data query, sorting and paging functions_jquery

In the past, I rarely used javascript to implement page functions mainly because I was afraid of trouble, but after learning about JQuery, this idea changed; with such a script component, it is convenient to isolate it from HTML when writing scripts, so that the writing is highly reusable. Sexual scripts are more convenient. The following is an introduction to the reusable script based on Ajax data query, sorting and paging functions written in the process of learning JQuery. As long as you follow certain rules of the script to describe HTML and introduce the script file, you can easily implement the functions described above.
Let’s first look at the code to implement the function:

/**应用脚本规则：
引用脚本: 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();
}
);

The constraint rules cleverly use the custom attributes of html. The above code describes the query , sorting and pagination ajax submission processing. Just follow the rules described when writing HTML. You don't need to write any script code; just add the script to the page:

<br/>