尝试通过单击表的标题对表列进行排序 [英] trying to sort the table column by clicking the header of the table
本文介绍了尝试通过单击表的标题对表列进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图通过使用javscript和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>
函数setDataType（cValue）
{
//此函数转换正确数组的日期和数字
//在排序函数中分配
var isDate = new Date （cValue）;
if（isDate ==NaN）
{
if（isNaN（cValue））
{
//这个值是一个字符串，
// STRING确保正确排序的大写字母
cValue = cValue.toUpperCase（）;
return cValue;
}
else
{
//价值是一个数字，以防止一个数字的分配
//添加一个额外的数字， OF
//当它是一个字符串时的数字
var myNum;
myNum = String.fromCharCode（48 + cValue.length）+ cValue;
return myNum;
}
}
else
{
//价值排序是一个日期，删除所有的惩罚和
//并返回STRING NUMBER
// BUG - STRING AND NOT NUMERICAL SORT .....
//（1 - 10 - 11 - 2 - 3 - 4 - 41 - 5等）
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;
}
}
函数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
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
indexArray [i] =（i + 1）
for（j = 0; j
if（colArray [i] == bArray [j]）
{
for（c = 0; c
if（oldIndex [c] ==（j + 1））
{
bSort = 1;
}
}
if（bSort == 0）
{
oldIndex [i] =（j + 1）
}
bSort = 0;
}
}
}
for（i = 0; 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
tableToSort.moveRow（（TableToSort.rows.length -1），1 ）;
}
for（i = 1; i
tableToSort.deleteRow（）;
}
}
< / script>
这是我的html和php脚本
< link href =../../ css / styles.css =stylesheettype =text / css/>
< div class =subheaderstyle =margin：16px 0 0; width：980px font-style：bold>
< div class =subheaderl>< / div>
< div class =subheaderr>< / div>
查看注册用户列表
< / div>
< div class =divstyle =overflow-y：scroll; height：500px;>
< table name =userlistid =userlistheight =600width =800>
< tr style =text-align：top; vertical-align = top>
< thead style =display：inline-block; font-weight：bold; line-spacing：02px>
< td colspan =0.4rowspan =1.0>< a href =javascript：sortTable（0，userlist）;>全名< / a>< / td>
< td colspan =0.4rowspan =1.0>< a href =javascript：sortTable（1，userlist）;> NickName< / a>< / td>
< td colspan =0.4rowspan =1.0>< a href =javascript：sortTable（2，userlist）;>电子邮件地址< / a>< / td&
< td colspan =0.4rowspan =1.0>< a href =javascript：sortTable（3，userlist）;> Gender< / a>< / td>
< td colspan =0.4rowspan =1.0>< a href =javascript：sortTable（4，userlist）;> DateofBirth< / a>< td&
< td colspan =0.4rowspan =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：表结构无法正确显示
我的probelm是我无法看到表头名称（全名，NickName，EmailAddress，Gender，DateofBirth，BELT ID）
那些不可见且表格必须是这样
全名NickName EmailAddress性别日期生日BELT ID
xxxxxxx xxxxx xxxxxx xxxxx xxxxxx xxxxx
xxxxxx xxxx xxxxxx xxxxx xxxx xxxxx
它显示如下
全名NickName EmailAddress性别日期Birth BELT ID
xxxxxxx xxxxx xxxxxx xxxxx xxxxxx xxxxx
xxxxx xxxxx xxxxx xxxx xxxxxx xxxxx
可以任何一个帮助这一个pls .........
我需要更改javascript函数或者我在错误的地方或以错误的方式定义函数
会告诉
。
解决方案
这里是我使用的表格排序函数：
工作演示： 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（！element instanceof Array）{
elements = toArray（elements）;
}
var parent = elements [0] .parentNode;
elements = elements.sort（sortFn）;
for（var i = 0; 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;
}
函数toArray（list）{
if（list instanceof Array）return list;
var a = [];
for（var i = 0; 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;
}
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 ....
解决方案
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;
}
这篇关于尝试通过单击表的标题对表列进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
