CODEWITHSUNDEEP
javascriptphpjqueryhtml-table
user3865463
user3865463

Reputation: 103

Order by clicking table header

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.)

Upvotes: 1

Views: 22897

Answers (3)

user3865463
user3865463

Reputation: 103

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>

Upvotes: 3

Rok Jambrošič
Rok Jambrošič

Reputation: 31

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

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č

Upvotes: 0

Sanjay
Sanjay

Reputation: 2503

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

Upvotes: -1

Related Questions