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


Posted in Javascript onSeptember 27, 2015

之前很少会用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的数据查询、排序和分页功能的思路,希望本文可以给大家带来启发和灵感。

Javascript 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
js获取和设置属性的方法
Feb 20 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 #Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 #Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 #Javascript
asp知识整理笔记3(问答模式)
Sep 27 #Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 #Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 #Javascript
AngularJS基础教程之简单介绍
Sep 27 #Javascript
You might like
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
Python中bisect的用法
2014/09/23 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python 调试冷知识(小结)
2019/11/11 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
什么是lambda函数
2013/09/17 面试题
架构师岗位职责
2013/11/18 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
追悼会主持词
2014/03/20 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
学习雷锋标语
2014/06/25 职场文书
英文版辞职信
2015/02/28 职场文书
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle