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:"[email protected]"},
{fname:"Mary", lname:"Moe", email:"[email protected]"},
{fname:"John", lname:"Doe", email:"[email protected]"},
{fname:"Julie", lname:"Dooley", email:"[email protected]"},
]
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:"[email protected]"},
{fname:"Mary", lname:"Moe", email:"[email protected]"},
{fname:"John", lname:"Doe", email:"[email protected]"},
{fname:"Julie", lname:"Dooley", email:"[email protected]"},
]
//--->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>DataTable Demo