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:

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

<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 $_POST array 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.)

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:

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

<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 $_POST array 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.)

• javascript
• php
• jquery
• html-table

• You making a fresh call to mypage.php - this will not effect the rendered one you have on screen. Either display the returned ajax data, or instead of ajax submit the actual form, which will cause a page refresh – Steve Commented Sep 13, 2014 at 14:23
• Good point. From what I've seen of AJAX it is good for submitting snippets of data without require the whole page to reload. However, I need the whole page to reload. Is there a simple line or two of AJAX that will do that? – user3865463 Commented Sep 13, 2014 at 14:37
• Ajax will require you reqwritting your php to just output the table data when requested via ajax, i am suggesting a simpler solution - will you have the dropdown form on the page as well, or are you removing that? – Steve Commented Sep 13, 2014 at 14:40
• Is all the data present in the page? If so, don't make a request, just sort the table data. If not, refreshing the page is the easiest thing, how is the data first loaded? – Adrian Lynch Commented Sep 13, 2014 at 15:14
• There are over 100K records in this mySQL database. The result set is 8 columns wide, retrieved in chunks using the user's "rows per page" preference. Filtering is available, including the ability to chose from a plete list of operators. All preferences are persistent... As the user choses another paginated page, the the corresponding set of 10 rows (for example) are retrieved from the database, keeping all user preferences in mind. All of that php has to be executed, and why I want to resubmit the whole page with a new $_POST array. – user3865463 Commented Sep 13, 2014 at 22:17

3 Answers 3

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.

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:

<script>
function submitform(formname) {
    document[formname].submit();
}
</script>

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery./jquery-latest.pack.js"></script>
    <script type="text/javascript" src="http://code.jquery./ui/1.9.2/jquery-ui.js"></script> 
    <script src="https://raw.github./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č

try jqGrid.it is easy to order column recored by clicking on header.