<?php
 mysql_connect("localhost", "root", '') or die(mysql_error());
 mysql_select_db("webapp")or die(mysql_error());

$result = mysql_query("SELECT accode, code, `name` FROM city ORDER BY `name`");
?>
<!DOCTYPE html>
<html>
    <head>
        <title>DataTables</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script src="media/js/jquery.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
        
        <style type="text/css">
            @import "media/css/demo_table_jui.css";
            @import "media/themes/smoothness/jquery-ui-1.8.4.custom.css";
        </style>
        
        <style>
            *{
                font-family: arial;
            }
        </style>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                $('#datatables').dataTable({
                    "sPaginationType":"full_numbers",
                    "aaSorting":[[2, "desc"]],
                    "bJQueryUI":true
                });
            })
            
        </script>
        
    </head>
    <body>
        <div>
            <table id="datatables" class="display">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Code</th>
                        
                    </tr>
                </thead>
                <tbody>
                    <?php
                    while ($row = mysql_fetch_array($result)) {
                    echo "<tr>";
                    echo "<td>$row[name]</td>";
                    echo "<td>$row[code]</td>";
                    echo "</tr>";
                      
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </body>
</html>
