Click here to Skip to main content
Click here to Skip to main content
Go to top

Sort On Multiple Fields In jQuery Repeater

, 26 Nov 2011
Rate this:
Please Sign up or sign in to vote.
This article will explain in detail how to sort data based on field in the Repeater

The original: http://zoyobar.blogspot.com/2011/11/sort-on-multiple-fields-in-jquery.html

Introduction/Catalog

Download sample: JQueryElementDemo-en.zip, the directory is /repeater/Default.aspx.

This article will explain in detail how to sort data based on field in the Repeater, the directory is as follows:

Prepare

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

Call The Method togglesort

Under normal circumstances, we start to sort data by clicking fields in table header, so you can call the togglesort method in the HeaderTemplate:

<je:Repeater ID="personList" runat="server" ... >
 <HeaderTemplate>
  <thead je-class="{header}">
   <tr>
    <td je-onclick="togglesort,'realname'">
     Real Name
    </td>
    <td je-onclick="togglesort,'age'">
     Age
    </td>
    <td je-onclick="togglesort,'birthday'">
     Birthday
    </td>
   </tr>
  </thead>
 </HeaderTemplate>
</je:Repeater>  

In our example, we call method togglesort when click on header by je-onclick of td tag, togglesort switch sorting status of field, the order is asc, desc, none. In addition, you also need to specify which field is switched, which followed after the togglesort as the first parameter.

The method togglesort will get data from a server-side again, so you do not need to call method fill.

Sort On Multiple Fields

By default, when you click a different field, the sorting status of sorted fields will disappear. If you want to sort according to multiple fields, you can hold down the key Ctrl while clicking field.

Server-Side Sorting

Server-side method can receive a parameter named __order, which contains information about the sorting:

public void ProcessRequest ( HttpContext context )
{
 context.Response.ContentType = "text/javascript";
 context.Response.Cache.SetNoStore ( );

 int pageindex = 1;
 int pagesize = 3;

 if ( null != context.Request["pageindex"] )
  int.TryParse ( context.Request["pageindex"], out pageindex );

 if ( null != context.Request["pagesize"] )
  int.TryParse ( context.Request["pagesize"], out pagesize );

 int beginIndex = pagesize * ( pageindex - 1 ) + 1;
 int endIndex = pagesize * pageindex;

 string order = context.Request["__order"];
 // "realname asc, age desc"

 // return json
}  

In the code above, we use a generic handler to return JSON, through the Request object to get the parameter __order. On how to return JSON, please refer to Return JSON In Different .NET Version.

Display the Sorting Status

In addition to sorting, usually to display the sorting status of the field, such as the up arrow indicates ascending order:

<je:Repeater ID="personList" runat="server"
Selector="'#list'" IsVariable="true"
PageSize="3" FillAsync-Url="person.ashx">
<HeaderTemplate>
 <thead je-class="{header}">
  <tr>

   <td je-onclick="togglesort,'realname'">
    Real Name
<span je-class="{sort,realname,,asc-arrow icon,desc-arrow icon}">
</span>
   </td>

  </tr>
 </thead>
</HeaderTemplate>
</je:Repeater>  

You can use je-class to show a different style by sorting status, syntax is:

{sort,<sort field name>[,<no sort class>[,<asc class>[,<desc class>]]]}

Comment

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
Web02 | 2.8.140922.1 | Last Updated 26 Nov 2011
Article Copyright 2011 by zoyobar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid