问题:

I am trying to sort the table column values by clicking on the header using javscript 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 probelm 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 any one help on this one pls......... do i need to change the javascript function or am i defining function in wrong place or in wrong manner

would any one pls tell

would any one pls help me on this ....

回答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; }

回答2:

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

You also need Jquery in order to use it.

回答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 :-)

转载请标明出处:trying to sort the table column by clicking the header of the table

文章来源: trying to sort the table column by clicking the header of the table

标签

sort

table

php