ITTreats.com

If we are making an reporting interface, it will be very very useful if we can provide sortable table on each column. If  the sort  happens  with a simple click on column names with out any  server requests ??  Yes,  it is perfect .

Here is a Treat  for you people who are actually  looking for  sortable  table  using  Javascript, this  can be  used  by any server side programming language  JSP, PHP, ASP   just  follow the instructions  below

Step 1:    All we need to do is  we have to present  our table data  in the  following  structure

You need to obtain your table output like above ..

<table>

<thead>head content </thead>

<tbody > body content </tbody>

<tfoot>Footer content </tfoot>

</table>

Step 2:  make sure to refer  the  sortable.js  in the head section of the page

<script src=”sorttable.js” type=”text/javascript”></script>

Step 3 :  sample php code of  the  page

<?php
// Include connection to your database
include(‘dbconnection.php’);
$getCompany_sql = ‘SELECT * FROM COMPANY‘;
$getCompany= mysql_query($getCompany_sql);?>

<table class=“sortable”>
<!– Table Header –>
<thead>

<!– Tabel body–>
<tbody>
<?php while ($row = mysql_fetch_array($getCompany)) {?>
<tr>
<th><?php echo $row.['companyName'] ?></th>
<th><?php echo $row.['companyTicker'] ?></th>
</tr>
<?php } ?>
</tbody>

<!– Tabel footer–>
<tfoot>

</tfoot>
</table>

Step 4:   Run the page  and click on the  Column Names   You are done,  you will see    Sortable  Table ready  for your need

Download Sorttable Script with Example Code Here

Written by adrevol

{adrevol has written 91 posts on ITTreats.com . See all posts by adrevol}