Skip to content

Instantly share code, notes, and snippets.

@afzafri

afzafri/datatabledemo.php

Last active May 16, 2023 10:57
Show Gist options
  • Save afzafri/19e281bc0664df6490a9eafd05123b9e to your computer and use it in GitHub Desktop.
Save afzafri/19e281bc0664df6490a9eafd05123b9e to your computer and use it in GitHub Desktop.
Download ZIP
Example usage of DataTables jQuery table plugin with Bootstrap
Raw
datatabledemo.php
<!DOCTYPE html>
<html>
<head>
<title>Datatables Study Demo</title>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- datatables script -->
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<!-- datatables bootstrap script -->
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<!-- bootstrap style -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- datatables style css -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<!-- create datatables -->
<script type="text/javascript">
$(document).ready(function(){
$('#studtable').DataTable();
});
</script>
</head>
<body>
<!-- list of last name by: https://gist.github.com/subodhghulaxe/8148971 -->
<?php include './names.php'; ?>
<table id="studtable" class="table table-striped table-bordered">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<?php
for($i=0;$i<count($last_names);$i++)
{
echo "
<tr>
<th>".($i+1)."</th>
<th>".$last_names[$i]."</th>
<th>".rand(12, 60)."</th>
</tr>
";
}
?>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment