嘗試通過單擊表格的 header 對表格列進行排序

Question

我正在嘗試通過使用 Javascript 和 html 和 Z2FEC3923284 和這個 myDA7 代碼單擊 header 來對表列值進行排序：

<?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：當我單擊 header 時，列未排序，我看不到表 header 名稱

問題2：表結構顯示不正確

我的問題是我看不到表 header 名稱（全名，昵稱，電子郵件地址，性別，出生日期，BELT 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 function 還是我在錯誤的位置或以錯誤的方式定義 function？

有人可以告訴嗎？

有人可以幫我嗎？

Answer 1

這是我使用的表格分類器 function：

工作演示： 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 鏈接）此用例很常見，因此有許多開箱即用的解決方案:-)