Web Developers Portal: Table sorting in php using javascript?

Wednesday, 11 April 2012

Table sorting in php using javascript?

The below example sort the table using java script. you can populate the table data from database using php.
You need to create 2 folders css and js. put the table.css in css folder and table.js in js folder.
copy paste the below code and save it as sort.php and put it in pages folder.

Download table.js and table.css

<html>
<head>
    <meta charset="UTF-8" />
    <title>Php table sort</title>
    <link rel="stylesheet" type="text/css" href="../css/table.css" />
    <script src="../js/table.js" type="text/javascript"></script>
</head>
<?php
error_reporting(0);
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("genedb", $con);
$sql="SELECT * FROM gene";

$result = mysql_query($sql);
    ?>
    <div id="content">
    <div id="blog">
        <div id="articles" style="width:692px;padding:0;">
<table width="250" border="1" class="example table-autosort table-autofilter table-autopage:10 table-stripeclass:alternate table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount" id="t1">
<thead>
    <tr style="height:35px">
        <th class="table-sortable:default table-sortable table-sorted-desc">Symbol</th>
        <th class="table-sortable:numeric table-sortable " title="Click to sort">Id</th>
        <th class="table-filterable table-sortable:default table-sortable" title="Click to sort">Location</th>
        </tr>
</thead>
<tbody>
    <?php
    while($row = mysql_fetch_array($result))
{
    ?>
<tr>
<td><?php echo $row['symbol']?></td>
<td><?php echo $row['id']?></td>
<td><?php echo $row['location']?></td>
<?php
}
mysql_close($con);
?>
</tbody>
<tfoot>

    <tr>
        <td style="cursor:pointer;" class="table-page:previous">< < Previous</td>
        <td style="text-align:center;" colspan="1">Page <span id="t1page">1</span> of <span id="t1pages">11</span></td>
        <td style="cursor:pointer;" class="table-page:next">Next > ></td>
    </tr>
    <tr>
        <td colspan="3"><span id="t1filtercount">105</span> of <span id="t1allcount">105</span> rows match filter(s)</td>
</tr></tfoot>
</table>

Output :