Data Tables Array of Dates
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.6.0/css/searchBuilder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.6.0/js/dataTables.searchBuilder.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTable Example</title>
</head>
<body>
<table id="user-table" class="table table-striped table-hover display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Transaction Dates<br>(Y-m-d)</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Transaction Dates<br>(Y-m-d)</th>
</tr>
</tfoot>
</table>
</body>
</html>
JavaScript
$(document).ready(function() {
let datasets = [
{
"User_ID": 1,
"First_Name": "John",
"Last_Name": "Doe",
"Email_Address": "[email protected]",
"transactionsCompletedDates": ["2023-10-01", "2023-10-05", "2023-10-12"]
},
{
"User_ID": 2,
"First_Name": "Alice",
"Last_Name": "Smith",
"Email_Address": "[email protected]",
"transactionsCompletedDates": ["2023-09-15", "2023-09-20"]
},
{
"User_ID": 3,
"First_Name": "Bob",
"Last_Name": "Johnson",
"Email_Address": "[email protected]",
"transactionsCompletedDates": ["2023-10-03"]
},
{
"User_ID": 4,
"First_Name": "Eve",
"Last_Name": "Brown",
"Email_Address": "[email protected]",
"transactionsCompletedDates": ["2023-09-25", "2023-09-30", "2023-10-10"]
},
{
"User_ID": 5,
"First_Name": "Sarah",
"Last_Name": "Wilson",
"Email_Address": "[email protected]",
"transactionsCompletedDates": ["2023-10-08", "2023-10-15"]
}
];
var columns = [
{ data: "User_ID" },
{ data: "First_Name" },
{ data: "Last_Name" },
{ data: "Email_Address" },
{
data: "transactionsCompletedDates",
render: {
_: '[, ]',
sb:'[]'
},
searchBuilder: {
orthogonal:'sb',
},
searchBuilderType: 'array',
},
];
var table = $('#user-table').DataTable({
data: datasets,
fixedHeader: true,
stateSave: false,
responsive: true,
colReorder: true,
dom: 'QlBfrtip',
columns: columns,
searchBuilder: {
logic: 'OR',
columns: [
0, 1, 2,3,4
],
},
order: [[0, 'asc']],
});
});