How To Use DataTables
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. Pagination, instant search and multi-column ordering.
DataTables is a powerful jQuery plugin for creating html table. It provides searching, sorting and pagination without any configuration.
You will learn some of the basics of DataTable and how to easily implement datatable in your own website projects.
Let's assume you have this array of data that you would like to create a html table using datatables framework:
//ajax row data
var ajax_data =
[
{fname:"Code", lname:"With Mark", email:"mark@codewithmark.com"},
{fname:"Mary", lname:"Moe", email:"mary@gmail.com"},
{fname:"John", lname:"Doe", email:"john@yahoo.com"},
{fname:"Julie", lname:"Dooley", email:"julie@gmail.com"},
]
DataTable Libraries
First you will need to include two datatables libraries:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
Note: Datatables has a dependence on jQuery. So, you will need to include jQuery in your project as well.
Convert Array Into DataTable Array Values
Next you will need to convert your ajax_data(from above) into array values.
In jQuery you can easily do it like this:
//--->convert it into datatable arrays > start
var data_table_arr = []
$.each(ajax_data, function(index, val)
{
data_table_arr.push([
val.fname,
val.lname,
val.email,
])
});
//--->convert it into datatable arrays > endUse DataTable Function
Lastly, you use the datatables function to output your html table
//id of your datatable where you want populate your table data
$('#your-table').DataTable(
{
data: data_table_arr,
"lengthMenu": [ [10,25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
"pageLength": 25,
columns: [
{ title: 'fname' },
{ title: "lname" },
{ title: "email" },
],
} );Full DataTables Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>DataTables </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($)
{
//ajax row data
var ajax_data =
[
{fname:"Code", lname:"With Mark", email:"mark@codewithmark.com"},
{fname:"Mary", lname:"Moe", email:"mary@gmail.com"},
{fname:"John", lname:"Doe", email:"john@yahoo.com"},
{fname:"Julie", lname:"Dooley", email:"julie@gmail.com"},
]
//--->convert it into datatable arrays > start
var data_table_arr = []
$.each(ajax_data, function(index, val)
{
data_table_arr.push([
val.fname,
val.lname,
val.email,
])
});
//--->convert it into datatable arrays > end
//id of your datatable you want populate rows for
$('#your-table').DataTable(
{
data: data_table_arr,
"lengthMenu": [ [10,25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
"pageLength": 25,
columns: [
{ title: 'fname' },
{ title: "lname" },
{ title: "email" },
],
} );
});
</script>
</head>
<body>
<table id="your-table" class="table table-hover table-bordered " width="100%"></table>
</body>
</html>
