JQuery Ajax はデータ クエリ、ソート、ページング機能を実装します_jquery

以前はトラブルが怖かったので、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/>

だけです。