首頁 > web前端 > js教程 > JQuery Ajax實作資料查詢、排序與分頁功能_jquery

JQuery Ajax實作資料查詢、排序與分頁功能_jquery

ringa_lee
發布: 2018-05-10 11:53:55
原創
1841 人瀏覽過

之前很少會用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時只需要遵循描述的規則即可,你並不需要在寫任何腳本程式碼;只需要把腳本加入頁面:

<br/>
登入後複製

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板