Click here to Skip to main content
13,201,763 members (74,940 online)
Click here to Skip to main content
Add your own
alternative version


1 bookmarked
Posted 26 Nov 2011

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 post can be found here.


Download sample:, 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:


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" ... >
  <thead je-class="{header}">
    <td je-onclick="togglesort,'realname'">
     Real Name
    <td je-onclick="togglesort,'age'">
    <td je-onclick="togglesort,'birthday'">

In our example, we call method togglesort when clicking 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">
 <thead je-class="{header}">

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


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>]]]}



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


About the Author

United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171020.1 | Last Updated 26 Nov 2011
Article Copyright 2011 by zoyobar
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid