Ajax-EE: Sort and Order Data with ExpressionEngine and Ajax part one brought to you by META Q
Interior Ad 1 brought to you by The META Q

Ajax-EE:
Sort and Order Data with ExpressionEngine and Ajax part one

When working with large amounts of data entries we often find it useful to let users order and sort the output of channel tag entries on the fly without re-rendering an entire page.

Here I’ll show a common way to accomplish this using Ajax and a typical set of ExpressionEngine channel tag entries.

Making it work when it doesn’t work.

The first step to making something work with Ajax is to make sure it works without Ajax. If a user doesn’t have JavaScript enabled I want to be sure they can still sort entries. Those users will just have to load the entire page.

Let’s start with a basic template that has a header, footer and content section. In the content section I’ll add channel entry tags that loop through article entries. By default they’ll be sorted by date in descending order. My template looks like this:

{embed='site/header'}
<h2>Articles</h2>
<table>
<thead>
  <tr>
    <th>Date</th>
    <th>Title</th>
    <th>Author</th>
    <th>Status</th>
  </tr>
</thead>
<tbody>
  {exp:channel:entries channel="articles" dynamic="no"}
    <tr>
      <td>{entry_date format="%M %d, %Y"}</td>
      <td><a href="{path='articles/{url_title}'}">{title}</a></td>
      <td>{author}</td>
      <td>{status}</td>
    </tr>
  {/exp:channel:entries}
</tbody>
</table>
{embed='site/footer'}

Now I’ll add links to the table headers with URL segments that will act as sort parameters that we use later:

<thead>
  <tr>
    <th><a href="{path='ajaxee/date/asc'}">Date</a></th>
    <th><a href="{path='ajaxee/title/asc'}">Title</a></th>
    <th><a href="{path='ajaxee/username/asc'}">Author</a></th>
    <th><a href="{path='ajaxee/status/asc'}">Status</a></th>
  </tr>
</thead>


The links I’ve added will point to the same template I’m working in now but the second and third URL segments declare the orderby and sort parameters we’ll use later. The following diagram illustrates how each segment is used.

Now, when the user clicks one of these links we can grab the orderby and sort segments from the URL and add them as parameters in our channel entries tag. I’ll update that section to look like this:

{exp:channel:entries channel="articles" dynamic="no"
orderby="{segment_2}"
sort="{segment_3}"
}
<tr>
  <td>{entry_date format="%M %d, %Y"}</td>
  <td>{title}</td>
  <td>{author}</td>
  <td>{status}</td>
  <td><a href="{path='articles/{url_title}'}">View &raquo;</a></td>
</tr>
{/exp:channel:entries}

Here I’ve added two parameters to my opening channel entries tag: orderby and sort. In the orderby parameter I use {segment_2} as the value and in sort I use {segment_3}. When a user clicks any of the links in the table header the channel entries tag will use those URL segments to set orderby and sort. This also works well because if neither segment is available the tag just assumes the default; order by date in descending order.

One problem is that my table header links will still have “asc” as the sort value in their segments. So, in order to let the user switch the sort order, I can use an if/else statement to test for asc or desc in the url segment. I’ll update my table header section like this:  

{if segment_3 == "asc"}
  <th><a href="{path='ajaxee/date/desc'}">Date</a></th>
  <th><a href="{path='ajaxee/title/desc'}">Title</a></th>
  <th><a href="{path='ajaxee/username/desc'}">Author</a></th>
  <th><a href="{path='ajaxee/status/desc'}">Status</a></th>
{if:else}
  <th><a href="{path='ajaxee/date/asc'}">Date</a></th>
  <th><a href="{path='ajaxee/title/asc'}">Title</a></th>
  <th><a href="{path='ajaxee/username/asc'}">Author</a></th>
  <th><a href="{path='ajaxee/status/asc'}">Status</a></th>
{/if}

This bit of code tests for “asc” in the third segment. If it’s there we switch up the links to use “desc.” Now, for example, the user can click the date sort link once and the data will be sorted by date in ascending order. If the user clicks the date link once more consecutively, the data will be sorted by date but in descending order. This pattern will persist as long as the user is clicking the same table header link.

Next Week: We Make it Ajaxee

This wraps up part one of using Ajax to sort and order entries in ExpressionEngine where we made sure that our sort and order functionality works without Ajax for those users who don’t have JavaScript enabled. Feel free to ask any questions you might have so far in the comments below. See you next week!


Terris Kremer's avatar

Terris Kremer

Front-end developer at Q Digital Studio

Terris Kremer is a front-end developer at Q Digital Studio. While he may joke that both front- and back-end developers are dweebs, Terris really does make development look cool. For Terris, work is a game that he can (and does) play all day long.

Posted

5.8.2012

Categories

Code > ExpressionEngine

Tags

ajax, expressionengine

2 comments >

What others are saying

UltraBob

It seems to me you don’t want to switch asc and desc on all the columns.  What you’d really want is something like:

<thead>
  <
tr>
    <
th>{if segment_2=="date" && segment_3=="asc"}<a href="{path='ajaxee/date/desc'}">{if:else}<a href="{path='ajaxee/date/asc'}">{/if}Date</a></th>
 ...
  </
tr>
</
thead

Ngon Com

I really like the way in this site to sort and order data: http://demo.shineecommerce.com/store/womens-tops

Can you write a simili article?


Speak your mind