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 相关文章推荐
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
js Proxy的原理详解
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
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python绘制多个子图的实例
2019/07/07 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
自荐信结尾
2013/10/27 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
运动会表扬稿
2015/01/16 职场文书
谢师宴学生致辞
2015/07/27 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
python基础之函数的定义和调用
2021/10/24 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python