JQuery+Ajax实现数据查询、排序和分页功能
2015-09-27 00:00
1106 查看
之前很少会用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的数据查询、排序和分页功能的思路,希望本文可以给大家带来启发和灵感。
相关文章推荐
- jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
- JQuery操作元素的属性与样式及位置
- jquery datatable 参数
- 竖直滚动 jquery 文字 图片
- jQuery标签切换布局---tab
- 一步一步学jQuery(一)
- Jquery简介选择的
- jquery的隐藏与显示
- jquery validate表单验证插件的基本使用方法及功能拓展
- 选择29部分有用jQuery应用程序插件(免费点数下载)
- jQuery菜单制作
- Labelauty–jQuery单选框/复选框美化插件分享
- JQuery选项笔记 选择器终结篇 -- 小案例
- JQuery中$.each 和$(selector).each()的区别详解【转】
- 基于jQuery仿淘宝产品图片放大镜代码分享
- jQuery实现瀑布流
- 如何用jQuery实现ASP.NET GridView折叠伸展效果
- jQuery Validate插入 reomte使用详细的说明
- myeclipse中jquery.min.js引入到工程中显示红叉
- JQuery validate验证规则