JQuery Ajax는 데이터 쿼리, 정렬 및 페이징 기능을 구현합니다._jquery

예전에는 문제가 생길까봐 자바스크립트를 거의 사용하지 않았지만, 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을 작성할 때 설명된 규칙을 따르기만 하면 됩니다. 스크립트 코드를 작성할 필요는 없습니다.

<br/>

페이지에 스크립트를 추가하기만 하면 됩니다.