|
 |
|
php จัดเรียง sort by click column header ขอตัวอย่าง code การ sort by click column header หน่อยค่ะ |
|
 |
|
|
 |
 |
|
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
<style type="text/css">
body{
font-size:0.8em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
table thead td{
font-weight:bold;
cursor:pointer;
}
/* If you wish to highlight current sortable column, add layout effects below */
.highlightedColumn{
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var tableWidget_okToSort = true;
var tableWidget_arraySort = new Array();
tableWidget_tableCounter = 1;
var activeColumn = new Array();
var currentColumn = false;
function sortNumeric(a,b){
a = a.replace(/,/,'.');
b = b.replace(/,/,'.');
a = a.replace(/[^\d\.\/]/g,'');
b = b.replace(/[^\d\.\/]/g,'');
if(a.indexOf('/')>=0)a = eval(a);
if(b.indexOf('/')>=0)b = eval(b);
return a/1 - b/1;
}
function sortString(a, b) {
if ( a.toUpperCase() < b.toUpperCase() ) return -1;
if ( a.toUpperCase() > b.toUpperCase() ) return 1;
return 0;
}
function sortTable()
{
if(!tableWidget_okToSort)return;
tableWidget_okToSort = false;
/* Getting index of current column */
var obj = this;
var indexThis = 0;
while(obj.previousSibling){
obj = obj.previousSibling;
if(obj.tagName=='TD')indexThis++;
}
if(this.getAttribute('direction') || this.direction){
direction = this.getAttribute('direction');
if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
if(direction=='ascending'){
direction = 'descending';
this.setAttribute('direction','descending');
this.direction = 'descending';
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
var tableObj = this.parentNode.parentNode.parentNode;
var tBody = tableObj.getElementsByTagName('TBODY')[0];
var widgetIndex = tableObj.getAttribute('tableIndex');
if(!widgetIndex)widgetIndex = tableObj.tableIndex;
if(currentColumn)currentColumn.className='';
document.getElementById('col' + widgetIndex + '_' + (indexThis+1)).className='highlightedColumn';
currentColumn = document.getElementById('col' + widgetIndex + '_' + (indexThis+1));
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
}
activeColumn[widgetIndex] = this;
var cellArray = new Array();
var cellObjArray = new Array();
for(var no=1;no<tableObj.rows.length;no++){
var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
cellArray.push(content);
cellObjArray.push(tableObj.rows[no].cells[indexThis]);
}
if(sortMethod=='N'){
cellArray = cellArray.sort(sortNumeric);
}else{
cellArray = cellArray.sort(sortString);
}
if(direction=='descending'){
for(var no=cellArray.length;no>=0;no--){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}else{
for(var no=0;no<cellArray.length;no++){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}
for(var no2=0;no2<cellObjArray.length;no2++){
cellObjArray[no2].removeAttribute('allreadySorted');
}
tableWidget_okToSort = true;
}
function initSortTable(objId,sortArray)
{
var obj = document.getElementById(objId);
obj.setAttribute('tableIndex',tableWidget_tableCounter);
obj.tableIndex = tableWidget_tableCounter;
tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
var tHead = obj.getElementsByTagName('THEAD')[0];
var cells = tHead.getElementsByTagName('TD');
for(var no=0;no<cells.length;no++){
if(sortArray[no]){
cells[no].onclick = sortTable;
}else{
cells[no].style.cursor = 'default';
}
}
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
}
tableWidget_tableCounter++;
}
</script>
</head>
<body>
<table id="myTable">
<!--
id of <col> tags should be "col" + index of table(1 = first table, 2 = second table) + _ (underscore) + column index(1.2.3.4...)
-->
<colgroup>
<col id="col1_1"></col>
<col id="col1_2"></col>
<col id="col1_3"></col>
<col id="col1_4"></col>
<col id="col1_5"></col>
</colgroup>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
initSortTable('myTable',Array('S','N','S','N','S'));
</script>
</body>
</html>
Ref : sortable_table
|
 |
 |
 |
 |
Date :
2009-12-01 09:46:10 |
By :
panyapol |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
มีแบบอื่นอีกมั้ยอ่ะค่ะ พอดีดึง้อมูลมาจากฐานข้อมูล แล้วพอมาแปลงมันerrorอ่ะ ม่ะรู้ว่าเราอาจจะแปลงผิดก้อได้ มีแบบอื่นอีกมั้ย ยังไงช่วยหน่อยนะค่ะ
|
 |
 |
 |
 |
Date :
2009-12-01 10:09:32 |
By :
paesalee |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
Code (PHP)
<table width="100%" border="0">
<tr>
<td align="center"><strong>สินค้า </strong>
</td>
</tr>
</table><br><br>
<table width="100%" border="1">
<tr bgcolor="#0000CC">
<td width="5%"><a href="product.php?sort=ProductID">รหัสสินค้า</a></td>
<td width="11%"><a href="product.php?sort=ProductName">ชื่อสินค้า</a></span></div></td>
</tr>
<?
$sql="select * from products order by ".$sort ;
$re=mysql_query($sql);
$k=1;
while ($row=mysql_fetch_array($re)){
?>
<tr >
<td><? echo $row["ProductID"]?></td>
<td><? echo $row["ProductName"]?></td>
</tr>
<? } ?>
</table>
โค้ดแบง่ายๆ ครับ
|
 |
 |
 |
 |
Date :
2009-12-01 10:47:14 |
By :
Sek-Artdrinker |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
Code (PHP)
<?
$strSort = $_GET["sort"];
if($strSort == "")
{
$strSort = "CustomerID";
}
$objConnect = mysql_connect("localhost","root","root") or die("Error Connect to Database");
$objDB = mysql_select_db("mydatabase");
$strSQL = "SELECT * FROM customer ORDER BY ".$strSort." ASC";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
Go to : PHP Sorting Columns In MySQL คลิกที่ Column แล้วจัดเรียงข้อมูลด้วย PHP กับ MySQL
|
 |
 |
 |
 |
Date :
2011-05-27 16:56:44 |
By :
webmaster |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 00
|