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

我的问题是我无法看到表头名称（全名，NickName，EmailAddress，性别，DateofBirth，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功能，还是我在错误的位置或以错误的方式定义功能？

有人可以告诉吗？

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

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链接）这个用例很常见，因此有很多开箱即用的解决方案： - ）

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

3 个答案: