How to sort by a second column while keeping the sorting on the first column?

I am working on table that is built dynamically depending on filters chosen. I currently am able to sort by any row that I click. The problem is I need the first row that I sort by to stay when I click on another row, so that the second row I click is sorted within the means of the first row. An example I have two columns, first name and last name.

  **FirstName**        **LastName**
    Bob                  Zimmer
    Bob                  Anderson 
    Kathy                Walege
    Kathy                Ball

So say I click on the first name row. It will stay the same since the first names are already in order. But when I click on the Last Name row I want the following to happen.

 **FirstName**         **LastName**
   Bob                   Anderson
   Bob                   Zimmer
   Kathy                 Ball
   Kathy                 Walege

I currently have it working so it only sorts by one column at a time. I am using both javascript and vb.net to get this to work with my code.

Here's the javascript:

    function SortColumn(col)
        {
            __doPostBack('SortBy',col);
        }

Here's the vb function that calls the javascript function:

     Private Function AddSortLinkToColumn(ByVal sSortColumn As String) As String
        Dim sVal As String = ""

        sVal = "<a href=""javascript:SortColumn('" & sSortColumn & "');""><font face=""Webdings"">"
        If m_sSort <> "" AndAlso Split(m_sSort, "-")(0) = sSortColumn AndAlso m_sSortDrxn = "ASC" Then
            sVal &= "&#53;"
        Else
            sVal &= "&#54;"
        End If
        sVal &= "</font></a>"

        Return sVal
    End Function

This is currently taking the column that is being clicked and matching it up with my global sort variable. If they match it displays an up arrow. If it fails it displays a down arrow.

I know that I need to somehow keep track of the first column that was clicked, but I am not sure how to do so. I have tried it on the vb.net side and javascript sides by adding another column to the sort but it doesn't do me any good if I can't get the first column value to stay!

How can I keep the first column's sort and then sort by the second column as well? Any help would be greatly appreciated!

UPDATE

With the help of the answer listed below I finally got this working! Here's the code:

    function SortColumn(col)
        {
            <% if m_sSort = nothing then %>
                __doPostBack('SortBy', col);
            <% else %>
                __doPostBack('SortBy', document.getElementById("SortField").value + "," + col); 
            <% end if %>
        }

The m_sSort was a public variable on the vb.net side. The "SortField" was the name of the hidden field where the m_sSort value was being stored.

Answers


Add a hidden field to the page called prevCol or something like that. Since it is a hidden field it will be posted back with the form.

In your postBack event handler, make sure to consume that hidden field and replace its value with the currently clicked column.

In this way you will have the column that is clicked as well as the column that was previously clicked. If you check the value and it is empty you know you are starting off.

Your remove sort button would then clear the prevCol field to ensure that you are starting fresh.

So your flow would look like this:

  • First column click: prevCol is empty so you sort by the currently clicked column and write its identifier to the prevCol field on the returned page.

  • Second column Click: prevCol now has a value. So first sort by that value, then sort by the supplied column. Make sure you write the supplied column to prevCol in the return.

  • Xth column Click: Same as second click. Inherintly this is going to make the prevCol the first column that is sorted each time.

When you click your remove sort button, ensure you are not writing a value to prevCol and thus starting the cycle over.

In this way you are kind of caching your previous column on the client with each response so that it is always present during post back.

EDIT:

I thought it would be simple to alternatively do this entirely on the client side with jQuery as long as the server did not need to know the order of the rows.

So I spent some time thinking about how this would be done using jQuery and I found it was a bit more challenging than I originally anticipated.

with some help from James Padolsey I was able to easily sort the table rows, but the logic of sorting based on the previous column was a bit strange.

This is what I ended up with.


Need Your Help

SQL join 2 tables with conditons on other tables

sql sql-server database

Hello Guys i am fairly new in the databases.

Facebook like side menu in android without library

android facebook

I am working on application and want to create a side menu like in Facebook application. Is there any way to make Side menu without using library.