我的网站上有一个表单，用户可以使用它按所选列对数据表进行排序。本质上它类似于：
<form action="" method="post">
<select name="orderby">
<option value="col_1">Column 1</option>
<option value="col_2">Column 2</option>
<option value="col_3">Column 3</option>
</select>
<input type="submit" value="Order By"/>
</form>
它工作得很好，但我想通过允许用户点击表列标题来更新这是如何做到的。我的尝试是将onclick事件添加到我的表标题中，并使用Javascript将相同的数组POST回页面。换句话说，单击列2时的Array ( [orderby] => col_2 )将保持完全相同。这将保留我的所有其他代码。这是我对表格标题所做的更改：
<table>
<tr>
<th onclick="post('col_1')">Column 1</th>
<th onclick="post('col_2')">Column 2</th>
<th onclick="post('col_3')">Column 3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>A</td>
</tr>
</table>
这是我写的Javascript：
<script>
function post(clm) {
$.post('mypage.php',{orderby:clm});
}
</script>
这不起作用。有人能告诉我需要改变什么才能让它发挥作用吗？现在，如果我单击表标题，$_POST数组将保持为空。（mypage.php是调用该函数的同一个页面。我也尝试过在单引号之间不加任何内容，就像在表单action属性中一样，但它也不起作用。）
这就是我提出的解决方案。我在每个表头列中嵌入了一个表单。该表单包含隐藏的输入，其中包含我希望包含在$_POST数组中的信息。在我的文章中使用的简化示例中，它只是name="orderby"和value="列名"。在th标记中，我保留了onclick事件，并让它调用一个允许我传递表单名称的javascript函数。javascript函数提交表单，表单将$_POST数组传递回页面，以便执行我关心的所有php代码。数组（[orderby]=>col_3）用于更新SQL查询中的ORDER BY属性，因此会将正确的数据返回到页面。
HTML:
<table>
<tr>
<th onclick="submitform('postdata1')">
Column 1
<form action="" name="postdata1" method="post">
<input type="hidden" name="orderby" value="col_1"/>
</form>
</th>
<th onclick="submitform('postdata2')">
Column 2
<form action="" name="postdata2" method="post">
<input type="hidden" name="orderby" value="col_2"/>
</form>
</th>
<th onclick="submitform('postdata3')">
Column 3
<form action="" name="postdata3" method="post">
<input type="hidden" name="orderby" value="col_3"/>
</form>
</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>A</td>
</tr>
</table>
这是javascript函数：
<script>
function submitform(formname) {
document[formname].submit();
}
</script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://raw.github.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js" type="text/javascript"></script>
<script type="text/javascript">
var st;
$(window).load(function(){
var table = $('table');
$('#col1, #col2, #col3') //all ID, za each
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){ //on click on any TH DOM object
table.find('td').filter(function(){
return $(this).index() === thIndex; //index of clicked element
}).sortElements(function(a, b){ //function sortElements.js
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
return this.parentNode;
});
inverse = !inverse;
});
});
});
</script>
</head>
<body>
<table id="tabela">
<thead>
<tr>
<th id="col1"><b>Column 1</b></th>
<th id="col2"><b>Column 2</b></th>
<th id="col3"><b>Column 3</b></th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td>eee</td>
<td>fff</td>
</tr>
<tr>
<td>ggg</td>
<td>hhh</td>
<td>iii</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
这是一个工作的例子，希望能有所帮助。并且您不必每次用户单击表标题时都发出请求。
你好，Rok Jambrošič
试试jqGrid.点击标题可以很容易地对列进行排序。