Question

我的网站上有一个表单，用户可以使用该表单按选择的列排序数据表。基本上它与此类似：

<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与调用该函数的页面相同。我也在单引号之间没有任何内容，就像使用表单操作属性一样，但它也没有那样工作。）

Answer 1

这就是我找到解决方案的原因。我在每个表头列中嵌入了一个表单。表单包含隐藏的输入，其中包含我想要包含在$ _POST数组中的信息。在我用于帖子的简化示例中，它只是名称=＆＃34; orderby＆＃34;和value =＆＃34; 列名＆＃34;。在th标签中，我保留了onclick事件并让它调用一个允许我传递表单名称的javascript函数。 javascript函数提交表单，该表单将$ _POST数组传递回页面，因此我关注的所有php代码都会执行。数组（[orderby] =＆gt; 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>

Answer 2

<!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>

这是一个工作示例，希望它有所帮助。每次用户点击表格标题时，您都不必提出请求。

很好的问候，RokJambrošič

Answer 3

尝试jqGrid.it很容易通过单击标题来订购列。

通过单击表头来排序

3 个答案: