How to set the function to make user click the table header to change sorting order

Question

I want to let user click the table header to sort the table, but can just set the ascending order, can not set the descending order in the same table header. following is the function I used,

function sortBy(sKey)
{
   document.sortResultsForm.sSortBy.value=sKey;
   document.sortResultsForm.submit();
}

function sortDistrictNamedescend($a, $b)
{
    if ($a->DistrictName == $b->DistrictName)
    {
        return 0;
    }
    return ($a->DistrictName < $b->DistrictName) ? 1 : -1;
}

function sortDistrictNameascend($a, $b)
{
    if ($a->DistrictName == $b->DistrictName)
    {
        return 0;
    }
    return ($a->DistrictName < $b->DistrictName) ? -1 : 1;
}

if($sSortBy=="District")
{
   usort($tempArr, 'sortDistrictNameascend');
}

Answer 1

I see your sortDistrictNamedescend function, but I don't see where you are calling it.

Answer 2

I'm not clear what you're really asking here.

1) Are you asking how to hook up the DOM element such that when you click a table header the sorter is invoked?

2) Or are you asking how to tell whether to sort ascending vs descending if the user clicks the same header again?

3) Or something else?