JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢、排序和分頁功能
之前很少會用javascript去實(shí)現(xiàn)頁功能主要怕麻煩,但了解JQuery后這種想法發(fā)生了變化;有了這樣的腳本組件就可以在編寫腳本時(shí)方便和HTML隔離出來,這樣編寫高重用性的腳本就更方便。下面就是介紹在學(xué)習(xí)JQuery過程中編寫的基于Ajax的數(shù)據(jù)查詢、排序和分頁功能的復(fù)用腳本,只要遵循腳本的某些規(guī)則描述HTML把腳本文件引入就可以方便實(shí)現(xiàn)以上描述的功能。
先看下實(shí)現(xiàn)功能的代碼:
/**應(yīng)用腳本規(guī)則: 引用腳本: JQuery腳本和JQuery的form插件腳本 Form的ID: viewform 顯示數(shù)據(jù)的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(); } );
約束規(guī)則巧用了html的自定義屬性,以上代碼描述查詢,排序和分頁的ajax提交處理。在編寫HTML時(shí)只需要遵循描述的規(guī)則即可,你并不需要在編寫任何腳本代碼;只需要把腳本添加到頁面里:
<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>
以上就是關(guān)于如何利用JQuery方便實(shí)現(xiàn)基于Ajax的數(shù)據(jù)查詢、排序和分頁功能的思路,希望本文可以給大家?guī)韱l(fā)和靈感。
- jQuery實(shí)現(xiàn)select模糊查詢(反射機(jī)制)
- jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢及分頁功能的方法
- jQuery實(shí)現(xiàn)id模糊查詢的小例子
- jQuery簡單實(shí)現(xiàn)的HTML頁面文本框模糊匹配查詢功能完整示例
- jquery zTree異步加載、模糊搜索簡單實(shí)例分享
- jquery ztree實(shí)現(xiàn)模糊搜索功能
- jquery easyui combobox模糊過濾(示例代碼)
- jQuery實(shí)現(xiàn)多級聯(lián)動下拉列表查詢框
- jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實(shí)例
- jQuery實(shí)現(xiàn)模糊查詢的方法分析
相關(guān)文章
Jquery on綁定的事件 觸發(fā)多次實(shí)例代碼
下面小編就為大家?guī)硪黄狫query on綁定的事件 觸發(fā)多次實(shí)例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個節(jié)點(diǎn)示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree的具體使用技巧,需要的朋友可以參考下2017-03-03jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼,非常的簡單實(shí)用,效果也很棒,有需要的小伙伴可以參考下。2015-04-04