Попытка отсортировать столбец таблицы, нажав на заголовок таблицы

Question

Я пытаюсь отсортировать значения столбцов таблицы, нажимая на заголовок, используя Javascript, HTML и PHP, и это мой код:

<?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>

, и это мой скрипт HTML и PHP:

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

Проблема 1: столбцы не сортируются, когда я нажимаю на заголовок, и я не могу видеть имена заголовков таблицы

Проблема 2: структура таблицы не отображает должным образом

Моя проблема в том, что я не могу увидеть имена заголовков таблицы (полное имя, ник, EmailAddress, Gender, DateofBirth, BELT ID), которые невидимы, и таблица должна выглядеть следующим образом1013 * это выглядело так:

       Full Name  NickName    EmailAddress    Gender   DateofBirth    BELT ID

       xxxxxxx     xxxxx        xxxxxx         xxxxx     xxxxxx         xxxxx



       xxxxx       xxxxx          xxxxx         xxxx     xxxxxx           xxxxx

Может кто-нибудь помочь с этим, пожалуйста?Нужно ли мне менять функцию Javascript или я определяю функцию в неправильном месте или неправильным образом?

Кто-нибудь может сказать, пожалуйста?

Кто-нибудь, пожалуйста, помогите мне в этом?

Answer 1

Вот функция сортировки таблицы, которую я использую:

Рабочая демонстрация: 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

На вашем месте я бы дал http://tablesorter.com/docs/ попытку:)

Вам также нужен Jquery, чтобы использовать его.

Answer 3

Вы можете решить эту проблему двумя способами: вы сортируете данные с помощью MySQL или с помощью JS.Если вы хотите отсортировать их с помощью mysql, вам необходимо перезагрузить страницу (или использовать вызов ajax и заменить таблицу).Для этого используйте функциональность jQuery ajax.Если вы хотите отсортировать таблицу с помощью JS, используйте для этого существующий скрипт (см. Ссылку на Catalin), этот вариант использования довольно распространен, поэтому существует множество готовых решений: -)