JQuery+Ajax实现数据查询、排序和分页功能_jquery
程序员文章站
2022-05-07 09:49:11
...
之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化;有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便。下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询、排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能。
先看下实现功能的代码:
先看下实现功能的代码:
/**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewform 显示数据的p的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时只需要遵循描述的规则即可,你并不需要在编写任何脚本代码;只需要把脚本添加到页面里:
上一篇: MySQL中InnoDB存储引擎的锁的基本使用教程_MySQL
下一篇: CURL传输与获取功能
推荐阅读
-
ASP.NET MVC分页和排序功能实现
-
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
-
微信小程序云开发实现数据添加、查询和分页
-
利用PHP访问数据库_实现分页功能与多条件查询功能的示例
-
jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)
-
利用PHP访问数据库_实现分页功能与多条件查询功能的示例
-
Kotlin实战案例:带你实现RecyclerView分页查询功能(仿照主流电商APP,可切换列表和网格效果)
-
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
-
Asp.net MVC 中利用jquery datatables 实现数据分页显示功能
-
AJAX 和SpringMVC 实现bootstrap模态框的分页查询功能详解