JQuery+Ajax实现数据查询、排序和分页功能

前端技术 2023/09/03 JavaScript

之前很少会用javascript去实现页功能主要怕麻烦，但了解JQuery后这种想法发生了变化；有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来，这样编写高重用性的脚本就更方便。下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询、排序和分页功能的复用脚本，只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能。
先看下实现功能的代码：

/**应用脚本规则：
引用脚本: JQuery脚本和JQuery的form插件脚本
Form的ID: viewform
显示数据的div的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时只需要遵循描述的规则即可，你并不需要在编写任何脚本代码；只需要把脚本添加到页面里：

<script src=jquery-latest.js></script>
<script src=form.js></script>
<script src=calendar.js></script>
<script src=calendar-setup.js></script>
<script src=\"lang/calendar-en.js\"></script>
<script src=pagination.js></script>
<form id=\"viewform\" method=\"post\" action=\"FrmOrderView.aspx\">
<input id=\"orderfield\" name=\"orderfield\" type=\"hidden\" value=\"\" />
<input id=\"pageindex\" name=\"pageindex\" type=\"hidden\" value =\"0\"/>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 100%; height: 100%\">
<tr>
<td valign=\"top\" align=\"left\">
<table width=\"550\" cellpadding=\"0\" cellspacing=\"0\">
<tr>
<td style=\"width: 63px; height: 17px; background-color: gainsboro;\">
CompanyName</td>
<td style=\"width: 114px; height: 17px;\">
<input id=\"Text1\" name=\"companyname\" type=\"text\" /></td>
<td style=\"width: 63px; height: 17px; background-color: gainsboro;\">
ShipCity</td>
<td style=\"width: 126px; height: 17px;\">
<input id=\"Text2\" name=\"shipcity\" type=\"text\" /></td>
</tr>
<tr>
<td style=\"width: 63px; height: 14px; background-color: gainsboro;\">
OrderDate</td>
<td style=\"width: 240px; height: 14px;\" align=\"left\">
<input id=\"Text3\" name=\"OrderDate_Begin\" type=\"text\" />
<input id=\"button1\" DateField=\"Text3\" type=\"button\" value=\"...\" /></td>
<td style=\"width: 63px; height: 14px; background-color: gainsboro;\">
</td>
<td style=\"width: 240px; height: 14px;\" align=\"left\">
<input id=\"Text4\" type=\"text\" name=\"OrderDate_End\" />
<input id=\"button2\" DateField=\"Text4\" type=\"button\" value=\"...\" /></td>
</tr>
<tr>
<td style=\"height: 50px\" align=\"left\" colspan=\"4\">
<input id=\"search\" type=\"button\" value=\"Search\" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=\"99%\">
<div id=\"listview\"></div>
</td>
</tr>
</table>
</form>

以上就是关于如何利用JQuery方便实现基于Ajax的数据查询、排序和分页功能的思路，希望本文可以给大家带来启发和灵感。

本文地址：https://www.stayed.cn/item/7184

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案