通过点击表标题进行排序

我在我的网站上有一个表单，用户可以使用该表单按选定的列排序数据表。本质上，它是与此类似：通过点击表标题进行排序

<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将相同的数组发回页面。换句话说，当列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是调用该函数的同一页面，我也在单引号之间尝试了它，就像使用form action属性一样，但它也没有以这种方式工作）。谢谢。

来源

2014-09-13 user3865463

你做一个新的呼叫mypage.php - 这将不会影响呈现一个你必须在屏幕上。要么显示返回的ajax数据，要么代替ajax提交实际的表单，这会导致页面刷新 – Steve 2014-09-13 14:23:39

好点。从我所见过的AJAX来看，提交数据片段并不需要重新加载整个页面。但是，我需要整个页面重新加载。有一个简单的行或两个AJAX将做到这一点？ – user3865463 2014-09-13 14:37:32

Ajax将要求你重新编写你的php，当通过ajax请求时输出表格数据，我建议一个更简单的解决方案 - 你是否也有页面上的下拉表单，或者你是否删除了？ – Steve 2014-09-13 14:40:44

这就是我的解决方案。我将表单嵌入到每个表头列中。该表单包含隐藏的输入和我希望包含在$ _POST数组中的信息。在我用于我的文章的简化示例中，它只是名称=“orderby”和值=“列名称”。在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>

来源

2014-09-14 12:14:10 user3865463

抱歉，对于迟到的回复，这与我将要建议的类似，唯一的区别是我会使用一种形式，并在提交之前使用JavaScript设置'orderby'值 - 这两种方式都没有优势，结果是一样的。 +1。另外，你应该接受你自己的答案 – Steve 2014-09-14 20:31:32

-1

尝试jqGrid.it很容易通过单击标题来重新排列列。

来源

2014-09-13 14:34:29

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

来源

2014-09-13 18:18:29

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

通过点击表标题进行排序

回答

相关问题