Code Chronicle: Jquery Datatables + Table using Mysql

Jquery Datatables + Table using Mysql

<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<Script type="text/javascript" src='//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js'>
</script>

<link rel='stylesheet' href='//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css' />

<script src='//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.js'></script>
    <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/cupertino/jquery-ui.css' />
    <link rel='stylesheet' href='//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.css' />

<style>

body { font-size: 140%; }
</style>


<script>



$(document).ready(function() {
    $('#example').dataTable( {
        //"processing": true,
        //"serverSide": true,
        //"ajax": "jsonencode.php"
    } );
} );

</script>

</head>

</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Vehcile ID</th>
                <th>KM Driven</th>
                <th>Date of Reading</th>
                <th>Date of Entry</th>
                <th>Entry User</th>
            </tr>
        </thead>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<Script type="text/javascript" src='//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js'>
</script>

<link rel='stylesheet' href='//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css' />

<script src='//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.js'></script>
    <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/cupertino/jquery-ui.css' />
    <link rel='stylesheet' href='//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.css' />

<style>

body { font-size: 140%; }
</style>


<script>



$(document).ready(function() {
    $('#example').dataTable( {

    } );
} );

</script>

</head>

</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Vehcile ID</th>
                <th>KM Driven</th>
                <th>Date of Reading</th>
                <th>Date of Entry</th>
                <th>Entry User</th>
            </tr>
        </thead>
<?php
$db = new mysqli('localhost', 'user', 'password', 'database');

if($db->connect_errno > 0){
    die('Unable to connect to database [' . $db->connect_error . ']');
}

$sql="select * from tbl_readings";

if(!$result = $db->query($sql)){
    die('There was an error running the query [' . $db->error . ']');
}
$json = array( );

while( $row = $result->fetch_assoc() ) {
   echo "<tr>";
   echo "<td> ".$row['id']."</td>";
   echo "<td> ".$row['vehicle_id']."</td>";
   echo "<td> ".$row['km_driven']."</td>";
   echo "<td> ".$row['dt_of_reading']."</td>";
   echo "<td> ".$row['dt_of_entry']."</td>";
   echo "<td> ".$row['entry_user']."</td>";
   echo "</tr>";
}

?>
        <tfoot>
            <tr>
                                <th>ID</th>
                <th>Vehcile ID</th>
                <th>KM Driven</th>
                <th>Date of Reading</th>
                <th>Date of Entry</th>
                <th>Entry User</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>
        <tfoot>
            <tr>
                                <th>ID</th>
                <th>Vehcile ID</th>
                <th>KM Driven</th>
                <th>Date of Reading</th>
                <th>Date of Entry</th>
                <th>Entry User</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)