欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢、排序和分頁功能

 更新時(shí)間:2015年09月27日 15:18:32   投稿:lijiao  
這篇文章介紹了利用JQuery方便實(shí)現(xiàn)基于Ajax的數(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ā)和靈感。

相關(guān)文章

  • jQuery unbind 刪除綁定事件詳解

    jQuery unbind 刪除綁定事件詳解

    下面小編就為大家?guī)硪黄猨Query unbind 刪除綁定事件詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jquery插件實(shí)現(xiàn)代碼雨特效

    jquery插件實(shí)現(xiàn)代碼雨特效

    這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)代碼雨特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • jQuery tip提示插件(實(shí)例分享)

    jQuery tip提示插件(實(shí)例分享)

    本篇文章主要介紹了jQuery tip提示插件的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-04-04
  • jquery滾動條插件(可以自定義)

    jquery滾動條插件(可以自定義)

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義滾動條插件的使用方法。需要的朋友可以參考借鑒
    2016-12-12
  • Jquery on綁定的事件 觸發(fā)多次實(shí)例代碼

    Jquery on綁定的事件 觸發(fā)多次實(shí)例代碼

    下面小編就為大家?guī)硪黄狫query on綁定的事件 觸發(fā)多次實(shí)例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • 移動端JQ插件hammer使用詳解

    移動端JQ插件hammer使用詳解

    本文給大家介紹的是一款移動端下的jQuery插件Hammer.js,他是一個開源的,輕量級的javascript庫,它可以在不需要依賴其他東西的情況下識別觸摸,鼠標(biāo)事件支持各種手機(jī)事件,比如縮放,qq左滑動刪除,放大,旋轉(zhuǎn)等
    2015-07-07
  • jQuery插件zTree實(shí)現(xiàn)單獨(dú)選中根節(jié)點(diǎn)中第一個節(jié)點(diǎn)示例

    jQuery插件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-03
  • 手寫簡單的jQuery雪花飄落效果實(shí)例

    手寫簡單的jQuery雪花飄落效果實(shí)例

    這篇文章主要給大家介紹了關(guān)于手寫簡單的jQuery雪花飄落的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-04-04
  • jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享

    jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享

    這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼,非常的簡單實(shí)用,效果也很棒,有需要的小伙伴可以參考下。
    2015-04-04
  • 獲取jqGrid中選擇的行的數(shù)據(jù)

    獲取jqGrid中選擇的行的數(shù)據(jù)

    本文主要介紹了獲取jqGrid中選擇的行的數(shù)據(jù)的語法和獲取簡例,需要的朋友可以看下
    2016-11-11

最新評論