+9

2011-11-01 23:39:18

JQuery Datatables plugin example with Php & Mysql

JQuery Datatables plugin example

Datatables.net Plugin Jquery

<?php
$con = mysql_connect("localhost", "root", "");
if (!$con) {
    die("Error: " . mysql_error());
}
mysql_select_db("sample", $con);
$result = mysql_query("SELECT * FROM countries");
?>
<!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>Country</th>
                        <th>Population</th>
                        <th>Internet Users</th>
                        <th>Penetration (% Population)</th>
                        <th>World % Users</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    while ($row = mysql_fetch_array($result)) {
                        ?>
                        <tr>
                            <td><?=$row['name']?></td>
                            <td><?=$row['population']?></td>
                            <td><?=$row['internet_users']?></td>
                            <td><?=$row['penetration']?></td>
                            <td><?=$row['world_users']?></td>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </body>
</html>

DOWNLOAD EXAMPLE

DataTables Plugin

Rate this post

You must be registered to vote first

Comments

tutastes

2012-10-04 19:12:59

Very nice, thank you,

The default list issue "Show 20 entries"? how do I do it?

Regars

YankeeDoodle

2012-10-10 01:50:55

Hi, fantastic coding, very solid. On localhost it runs perfectly, in browser the rows collapse to 5 pixels, and no text is shown. What am I doing wrong? Regards.

+9