尝试通过单击表格的标题对表格列进行排序

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：表结构显示不正确

我的问题是我看不到表头​​名称（全名、昵称、电子邮件地址、性别、出生日期、腰带 ID） 那些是看不见的，桌子一定是这样的

     Full Name  NickName    EmailAddress    Gender   DateofBirth    BELT ID

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

它是这样显示的：

       Full Name  NickName    EmailAddress    Gender   DateofBirth    BELT ID

       xxxxxxx     xxxxx        xxxxxx         xxxxx     xxxxxx         xxxxx



       xxxxx       xxxxx          xxxxx         xxxx     xxxxxx           xxxxx

有人可以帮忙吗？ 我需要更改 Javascript 函数还是在错误的位置或以错误的方式定义函数？

谁能告诉我？

有人可以帮我解决这个问题吗？

Answer 1

如果我是你，我会试试 http://tablesorter.com/docs/ :)

您还需要 Jquery 才能使用它。

Answer 2

你可以通过两种方式解决这个问题：用mysql或用JS对数据进行排序。如果要使用 mysql 对它们进行排序，则必须重新加载页面（或使用 ajax 调用并替换表）。为此，请使用 jQuery ajax 功能。如果您想使用 JS 对表格进行排序，请使用现有脚本来执行此操作（请参阅 Catalin 链接）这个用例很常见，因此有许多开箱即用的解决方案 :-)

Answer 3

这是我使用的表格排序功能：

工作演示：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;
}