Trying to sort the table column by clicking the header of the table

Question

I am trying to sort the table column values by clicking on the header using Javascript and html and PHP and this is my code:

<?php
$rows=array();
$query = "SELECT CONCAT(usrFirstname,'',usrSurname) As FullName,usrNickname AS Nickname,";
$query.= "usrEmail As EmailAddress,usrGender AS  Gender,DATE_FORMAT(usrDOB,'%d%m%y') As DOB,usrBelt AS BeltId";
$query.= " FROM user";
$result = mysql_query($query);
echo mysql_error();
if($result)
{
    while($row=mysql_fetch_assoc($result))
    {
        $rows[] = $row;
    }
}
?>
<script type="text/javascript">
function setDataType(cValue)
{
    // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
    // SORTING WHEN IN THE SORT FUNCTION
    var isDate = new Date(cValue);
    if (isDate == "NaN")
    {
        if (isNaN(cValue))
        {
            // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
            // STRING UPPER CASE TO ASSURE PROPER A-Z SORT
            cValue = cValue.toUpperCase();
            return cValue;
        }
        else
        {
            // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
            // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
            // THE NUMBER WHEN IT IS A STRING
            var myNum;
            myNum = String.fromCharCode(48 + cValue.length) + cValue;
            return myNum;
        }
    }
    else
    {
        // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
        // AND RETURN THE STRING NUMBER
        //BUG - STRING AND NOT NUMERICAL SORT .....
        // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5  etc.)
        var myDate = new String();
        myDate = isDate.getFullYear() + " " ;
        myDate = myDate + isDate.getMonth() + " ";
        myDate = myDate + isDate.getDate(); + " ";
        myDate = myDate + isDate.getHours(); + " ";
        myDate = myDate + isDate.getMinutes(); + " ";
        myDate = myDate + isDate.getSeconds();
        //myDate = String.fromCharCode(48 + myDate.length) + myDate;
        return myDate ;
    }
}
function sorttable(col, tabletosort)
{
    var iCurCell = col + tableToSort.cols;
    var totalRows = tableToSort.rows.length;
    var bSort = 0;
    var colArray = new Array();
    var oldIndex = new Array();
    var indexArray = new Array();
    var bArray = new Array();
    var newRow;
    var newCell;
    var i;
    var c;
    var j;

    for (i=1; i < tableToSort.rows.length; i++)
    {
        colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
        iCurCell = iCurCell + tableToSort.cols;
    }
    for (i=0; i < colArray.length; i++)
    {
        bArray[i] = colArray[i];
    }
    colArray.sort();
    for (i=0; i < colArray.length; i++)
    { // LOOP THROUGH THE NEW SORTED ARRAY
        indexArray[i] = (i+1);
        for(j=0; j < bArray.length; j++)
        { // LOOP THROUGH THE OLD ARRAY
            if (colArray[i] == bArray[j])
            { 
                for (c=0; c<i; c++)
                {
                    if ( oldIndex[c] == (j+1) )
                    {
                        bSort = 1;
                    }
                }
                if (bSort == 0)
                {
                    oldIndex[i] = (j+1);
                }
                bSort = 0;
            }
        }
    }

    for (i=0; i<oldIndex.length; i++)
    {
        newRow = tableToSort.insertRow();
        for (c=0; c<tableToSort.cols; c++)
        {
            newCell = newRow.insertCell();
            newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
        }
    }
    for (i=1; i<totalRows; i++)
    {
        tableToSort.moveRow((tableToSort.rows.length -1),1);
    }
    for (i=1; i<totalRows; i++)
    {
        tableToSort.deleteRow();
    }   
}
</script>

and this is my html and PHP script is:

<link href="../../css/styles.css" rel="stylesheet" type="text/css" />
<div class="subheader" style="margin:16px 0 0;width:980px font-style:bold">
    <div   class="subheaderl"></div>
    <div class="subheaderr"></div>
    View Registered User List
</div>
<div class="div" style="overflow-y:scroll;height:500px;">
    <table name="userlist" id ="userlist" height= "600" width="800">
        <tr style="text-align:top; vertical-align = top">
            <thead style="display:inline-block;font-weight:bold;line-spacing:02px">  
                <td colspan="0.4" rowspan="1.0"><a href="javascript:sortTable(0, userlist);"> Full Name</a></td>
                <td colspan="0.4" rowspan ="1.0"><a href="javascript:sortTable(1, userlist);">NickName</a></td>
                <td colspan="0.4" rowspan ="1.0"><a href="javascript:sortTable(2, userlist);">Email Address</a></td>
                <td colspan="0.4" rowspan ="1.0"><a href="javascript:sortTable(3, userlist);">Gender</a></td>
                <td colspan="0.4" rowspan ="1.0"><a href="javascript:sortTable(4, userlist);">DateofBirth</a><td>
                <td colspan="0.4" rowspan ="1.0"><a href="javascript:sortTable(5, userlist);">BELT ID</a></td>      
            </thead> 
            <?php foreach ($rows as $row){?>
            <tr style="font-size:small; word-spacing:10px;">
                <td colspan="0.4"><?php echo $row['FullName']?></td>
                <td colspan="0.4"><?php echo $row['Nickname']?></td>
                <td  colspan="0.4"><?php echo $row['EmailAddress']?></td>
                <td colspan="0.4"><?php echo $row['Gender']?></td>
                <td colspan="0.4"><?php echo $row['DOB']?></td>
                <td  colspan="0.4"><?php echo $row['BeltId']?></td>
            </tr>
            <?php }?>
        </tr>
    </table>
    <div style="clear: both"></div>
</div>
<div class="divbottom"></div>

Problem 1:the columns are does not sorted when I click on the header and I am not able to see the table header names

Problem 2: the table structure is not dispalying properly

My problem is I am not able to see the table header names (Full Name,NickName,EmailAddress,Gender,DateofBirth,BELT ID) those are invisible and the table must be like this

     Full Name  NickName    EmailAddress    Gender   DateofBirth    BELT ID

     xxxxxxx     xxxxx        xxxxxx         xxxxx     xxxxxx         xxxxx
     xxxxxx       xxxx        xxxxxx         xxxxx      xxxx          xxxxx

it was displaying like this:

       Full Name  NickName    EmailAddress    Gender   DateofBirth    BELT ID

       xxxxxxx     xxxxx        xxxxxx         xxxxx     xxxxxx         xxxxx



       xxxxx       xxxxx          xxxxx         xxxx     xxxxxx           xxxxx

Can anyone help on this one please? Do I need to change the Javascript function or am I defining function in wrong place or in wrong manner?

Would anyone please tell?

Would anyone please help me on this?

Answer 1

Here's the table sorter function I use:

Working demo: http://jsfiddle.net/gilly3/DYYqv/

function sortTable(table, cellIndex, isAscending) {
    sortElements([].slice.call(table.rows, 1), function(r1, r2) {
        return compareRows(cellIndex, isAscending, r1, r2);
    });
}

function sortElements(elements, sortFn) {
    if (!elements instanceof Array) {
        elements = toArray(elements);
    }
    var parent = elements[0].parentNode;
    elements = elements.sort(sortFn);
    for (var i = 0; i < elements.length; i++) {
        parent.appendChild(elements[i]);
    }
}

function compareRows(cellIndex, isAscending, r1, r2) {
    var sortOperator = isAscending ? 1 : -1;
    var s1 = getText(r1.cells[cellIndex]).toLowerCase();
    var s2 = getText(r2.cells[cellIndex]).toLowerCase();
    var i1 = parseFloat(s1);
    var i2 = parseFloat(s2);
    var d1 = new Date(s1);
    var d2 = new Date(s2);
    var c1 = s1;
    var c2 = s2;
    if (!isNaN(d1) && !isNaN(d2)) {
        c1 = d1.valueOf();
        c2 = d2.valueOf();
    }
    else if (!isNaN(i1) && !isNaN(i2)) {
        c1 = i1;
        c2 = i2;
    }
    var result = c1 > c2 ? 1 : c1 < c2 ? -1 : 0;
    return sortOperator * result;
}

function toArray(list) {
    if (list instanceof Array) return list;
    var a = [];
    for (var i = 0; i < list.length; i++) {
        a.push(list[i]);
    }
    return a;
}

function getText(el) {
    var text = "";
    for (var i = 0; el && el.childNodes && i < el.childNodes.length; i++) {
        var node = el.childNodes[i];
        text += node.nodeType == 3 ? node.data : getText(node);
    }
    return text;
}

Answer 2

If I were you I'd give http://tablesorter.com/docs/ a try:)

You also need Jquery in order to use it.

Answer 3

You can solve this problem in two ways: you sort the data with mysql or with JS. If you want to sort them with mysql, you have to reload the page (or use an ajax call and replace the table). For this, use jQuery ajax functionality. If you want to sort your table with JS, use an existing script to do this (see Catalin link) this use case is quite common so there are many out-of-the-box solutions out there:-)