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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
关于python多重赋值的小问题
2019/04/17 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
如何利用python发送邮件
2020/09/26 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2017春节晚会开幕词
2016/03/03 职场文书