javascript 通过单击表标题订购
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25824095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Order by clicking table header
提问by user3865463
I have an form on my web site that a user can use to order a table of data by a column of choice. Essentially it is similar to this:
我的网站上有一个表单，用户可以使用该表单按选择的列对数据表进行排序。本质上它类似于：
<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>
It works well, but I want to update how this is done by allowing the user to click on the table column header instead. My attempt to do this was to add the onclick event to my table headers and use Javascript to POST the same array back to the page. In other words, Array ( [orderby] => col_2 )when Column 2 is clicked on will remain exactly the same. This would preserve all of my other code. Here is the change I made to my table headers:
它运行良好，但我想通过允许用户单击表列标题来更新这是如何完成的。我尝试这样做是将 onclick 事件添加到我的表标题并使用 Javascript 将相同的数组 POST 回页面。换句话说，Array ( [orderby] => col_2 )当第 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>
And here is the Javascript I wrote:
这是我写的 Javascript：
<script>
function post(clm) {
$.post('mypage.php',{orderby:clm});
}
</script>
This isn't working. Can anyone tell me what I need to change to get it to work? Right now if I click on the table headers, the $_POSTarray remains empty. (mypage.php is the same page that is calling the function. I also tried it with nothing between the single quotes, like you would with the form action attribute, but it didn't work that way either.)
这不起作用。谁能告诉我我需要改变什么才能让它工作？现在，如果我单击表标题，则$_POST数组保持为空。（mypage.php 是调用该函数的同一页面。我也尝试过在单引号之间不加任何内容，就像使用表单操作属性一样，但它也不能那样工作。）
回答by user3865463
This is what I arrived at for a solution. I embedded a form into each of the table header columns. The form contains hidden inputs with the information that I want included in the $_POST array. In the simplified example I used for my post, it is simply name="orderby" and value="the column name". In the the th tag, I kept the onclick event and have it calling a javascript function that allows me to pass the form name. The javascript function submits the form, which passes the $_POST array back to the page so all of the php code I'm concerned about executes. The array ( [orderby] => col_3 ) is used to update the ORDER BY attribute in my SQL query, so the correct data is returned to the page.
这就是我找到解决方案的原因。我在每个表头列中嵌入了一个表单。该表单包含隐藏输入以及我希望包含在 $_POST 数组中的信息。在我用于我的帖子的简化示例中，它只是 name="orderby" 和 value="列名称"。在 th 标签中，我保留了 onclick 事件并让它调用一个允许我传递表单名称的 javascript 函数。javascript 函数提交表单，该表单将 $_POST 数组传递回页面，以便执行我关心的所有 php 代码。数组 ( [orderby] => col_3 ) 用于更新我的 SQL 查询中的 ORDER BY 属性，因此将正确的数据返回到页面。
HTML:
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>
Here is the javascript function:
这是javascript函数：
<script>
function submitform(formname) {
document[formname].submit();
}
</script>
回答by Rok Jambro?i?
<!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>
Here is an working example, hope it helps. And you don't have to make a request every time user clicks the table header.
这是一个工作示例，希望它有所帮助。并且您不必每次用户单击表头时都发出请求。
Nice regards, Rok Jambro?i?
问候，Rok Jambro？我？
回答by Sanjay
try jqGrid.it is easy to order column recored by clicking on header.
尝试 jqGrid。通过单击标题可以轻松订购记录的列。
