通过单击表头进行排序答案

【问题标题】：Order by clicking table header通过单击表头进行排序
【发布时间】：2018-06-28 22:46:42
【问题描述】：

我的网站上有一个表单，用户可以使用该表单按选择的列对数据表进行排序。本质上是这样的：

<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 将相同的数组发布回页面。换言之，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>

这是我写的 Javascript：

<script>
function post(clm) {
    $.post('mypage.php',{orderby:clm});
}
</script>

这行不通。谁能告诉我我需要改变什么才能让它工作？现在，如果我单击表头，$_POST 数组仍然为空。（mypage.php 是调用该函数的同一页面。我也尝试过在单引号之间没有任何内容，就像使用表单操作属性一样，但它也不是那样工作的。）

【问题讨论】：

您重新调用 mypage.php - 这不会影响您在屏幕上呈现的内容。要么显示返回的 ajax 数据，要么不提交实际的 ajax 表单，这会导致页面刷新
好点。从我对 AJAX 的了解来看，它非常适合提交 sn-ps 数据，而无需重新加载整个页面。但是，我需要重新加载整个页面。是否有一两行简单的 AJAX 可以做到这一点？
Ajax 将要求您重新编写您的 php，以便在通过 ajax 请求时仅输出表数据，我建议一个更简单的解决方案 - 您是否也会在页面上有下拉表单，或者您是否正在删除它?
页面中是否存在所有数据？如果是这样，请不要提出请求，只需对表格数据进行排序即可。如果没有，刷新页面是最简单的事情，数据是怎么先加载的？
这个 mySQL 数据库中有超过 100K 的记录。结果集为 8 列宽，使用用户的“每页行数”首选项分块检索。过滤是可用的，包括从完整的运算符列表中进行选择的能力。所有偏好都是持久的......当用户选择另一个分页页面时，从数据库中检索相应的 10 行（例如）集合，同时牢记所有用户偏好。所有这些 php 都必须执行，以及为什么我要使用新的 $_POST 数组重新提交整个页面。

标签： javascript php jquery html-table

【解决方案1】：

这就是我想要解决的问题。我在每个表头列中嵌入了一个表单。该表单包含隐藏的输入，其中包含我希望包含在 $_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>

【讨论】：

抱歉回复晚了，这与我要建议的内容相似，唯一的区别是我会使用一种表单，并在提交之前使用 javascript 设置 orderby 值 - 没有无论哪种方式都有优势，结果是一样的。 +1。另外，您应该接受自己的答案

【解决方案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>

这是一个工作示例，希望对您有所帮助。而且您不必每次用户单击表头时都发出请求。

问候，Rok Jambrošič

【讨论】：

感谢您的建议。我希望不必重写所有的 php，因为 php 代码中有很多逻辑在我提供的简化示例中没有表示。最终，我想要做的就是允许用户单击，并使用新的 $_POST 数组刷新页面，该数组包含我定义的一堆 sel:val 对。

【解决方案3】：

试试jqGrid。点击标题很容易订购记录的列。

【讨论】：