通過點擊表標題進行排序

我在我的網站上有一個表單，用戶可以使用該表單按選定的列排序數據表。本質上，它是與此類似：通過點擊表標題進行排序

<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

通過點擊表標題進行排序

回答

相關問題