Click here to Skip to main content
Click here to Skip to main content

Retrieve Data In jQuery Repeater

, 23 Nov 2011
Rate this:
Please Sign up or sign in to vote.
This article will explain in detail how to retrieve data in the Repeater

The original: http://zoyobar.blogspot.com/2011/11/retrieve-data-in-jquery-repeater.html

Introduction/Catalog

Due to the limited time, synchronization cannot be guaranteed in more than one blog article, at the following address you can view up-to-date content, please understand:

http://zoyobar.blogspot.com/2011/11/retrieve-data-in-jquery-repeater.html

This article will explain in detail how to retrieve data in the Repeater , the directory is as follows:

Prepare

Please view the prepare section at 30 Minutes Grasp ASP.NET jQuery Repeater.

Set FilterTemplate

In the FilterTemplate property of Repeater , contain elements that need to be filled in the search conditions, such as text box, datepicker, and so on. In addition, can also contain search button:

<je:Repeater ID="productList" runat="server"  ... >

 <FilterTemplate>
  <tr>
   <td>
    <input type="text" size="10"
     je-id="productname"
     je-value="productname" />
   </td>
   <td>
    <input type="text" size="5"
     je-id="model"
     je-value="model" />
   </td>
   <td>
    <input type="text" size="4"
     je-id="price1"
     je-value="price1" />
    -
    <input type="text" size="4"
     je-id="price2"
     je-value="price2" />
   </td>
   <td>
    <input type="text" size="3"
     je-id="amount"
     je-value="amount" />
   </td>
   <td>
    <input type="text" size="10"
je-datepicker="dateFormat='yy-mm-dd';changeMonth=true;changeYear=true"
     je-id="manufactureDate1"
     je-value="manufactureDate1" />
    -
    <input
je-datepicker="dateFormat='yy-mm-dd';changeMonth=true;changeYear=true"
     type="text" size="10"
     je-id="manufactureDate2"
     je-value="manufactureDate2" />
   </td>
  </tr>
  <tr je-class="{highlight}">
   <td colspan="5" align="right">
    <span je-button=";" onclick="javascript:clearCondition();">Reset</span>
    <span je-button=";" je-onclick="filter">Search</span>
   </td>
  </tr>
 </FilterTemplate>

</je:Repeater>

In the code, using the input element to add text box and datepicker, and associate the search field in property FilterField by je-id, je-value is the search condition which will initialize the value of element.

We also uses the je-datepicker to create datepicker above, as to how to use the je-<jqueryui widget name> to create more jQueryUI widget, you can refer to Add And Set Datepicker, Drop Down Check Box And So On Into jQuery Repeater .

We create a button for search by je-button and je-onclick, je-onclick is specified as the filter, which means the implementation of filter method, you can refer the Special Binding section at 30 Minutes Grasp ASP.NET jQuery Repeater.

Set FilterField And FilterFieldDefault

The field names which set in the property FilterField, will be passed as a parameter to the server-side method:

<je:Repeater ID="productList" runat="server"
 FilterField="['productname','price1','price2']"
 FilterFieldDefault="['',-1,-1]"
 FillAsync-Url="product.asmx"
 FillAsync-MethodName="GetProductList">

 <FilterTemplate>
  <tr>
   <td>
    <input type="text" size="10"
     je-id="productname" je-value="productname" />
   </td>

   <td>
    <input type="text" size="4"
     je-id="price1" je-value="price1" />
    -
    <input type="text" size="4"
     je-id="price2" je-value="price2" />
   </td>

  </tr>
 </FilterTemplate>

</je:Repeater>

In code, there are 3 fields, productname, price1 and price2. Property FilterFieldDefault is default values for these search conditions, so the server-side method GetProductList can take the following forms:

public SortedDictionary<string, object> GetProductList (
 int pageindex, int pagesize,
 string productname, float price1, float price2 )
{

  if ( price1 != -1 )
   ...

  if ( price2 != -1 )
   ...

}

If the price1, price2 equals -1, indicate that the user does not set the search condition on prices. As for the format of the returned data on the server side, refer the Data Format of Request/Return section at 30 Minutes Grasp ASP.NET jQuery Repeater.

Call Method setfilter And Filter

After a simple setup above, you can retrieve data using search button in FilterTemplate , in addition, you can also use another method:

<input id="myproductname" type="text" size="10" />

<je:Button ID="cmdSearch" runat="server" Label="Search 2" Click="
function(){
 productList.__repeater('setfilter', 'productname', $('#myproductname').val());
 productList.__repeater('filter');
}
">
</je:Button>

In the example above, in the button's click event, we call the setfilter method of repeater to set the filter condition productname to the value of text box which id is myproductname, and call the filter method to retrieve the data.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

zoyobar

United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 23 Nov 2011
Article Copyright 2011 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid