Master detail list with details within date range
Master detail list with details within date range
vlai
Posts: 2Questions: 1Answers: 0
I have a master detail list and want to limit the display of detail within certain date range rather full listing. So I add opts to the field as the following. But it is not working, the full listing is listed. Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<script src="js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
<script src="js/dataTables.editor.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script class="init">
$(document).ready(function() {
var userEditor = new $.fn.dataTable.Editor( {
ajax: "ajax/user.php",
table: "#userlist",
fields: [ {
label: "User Name:",
name: "realName"
}, {
label: "Card ID:",
name: "card_id"
}, {
label: "Access Level:",
name: "permissions"
}
]
} );
var userTable=$('#userlist').DataTable( {
dom: "Bfrtip",
ajax: "ajax/user.php",
columns: [
{ data: "realName" },
{ data: "card_id" },
{ data: "permissions" }
],
select: {
style: 'single'
},
buttons: [
{ extend: "create", editor: userEditor },
{ extend: "edit", editor: userEditor },
{ extend: "remove", editor: userEditor }
]
} );
var logsEditor = new $.fn.dataTable.Editor( {
ajax: {
url: "ajax/record.php",
data: function(d) {
var selected=userTable.row({selected: true });
if (selected.any()) {
d.code=selected.data().card_id;
}
}
},
table: "#reclist",
fields: [ {
label: "Card ID:",
name: "logs.code"
}, {
label: "Datetime:",
name: "logs.stamp",
opts: {
minDate: new Date('2018-01-01'),
maxDate: new Date('2018-12-31')
}
}
]
} );
var logsTable=$('#reclist').DataTable( {
dom: "Bfrtip",
ajax: {
url: "ajax/record.php",
type: 'post',
data: function(d) {
var selected=userTable.row({selected:true});
if (selected.any()) {
d.code=selected.data().card_id;
}
}
},
columns: [
{ data: "logs.stamp" },
{ data: "logs.code" }
],
select: true,
buttons: [
{ extend: "create", editor: logsEditor },
{ extend: "edit", editor: logsEditor },
{ extend: "remove", editor: logsEditor }
]
} );
userTable.on('select',function(){
logsTable.ajax.reload();
logsEditor
.field('logs.code')
.def(userTable.row({selected: true}).data().cardID);
});
userTable.on('deselect',function(){
logsTable.ajax.reload();
});
logsEditor.on('submitSuccess',function(){
userTable.ajax.reload();
});
userEditor.on('submitSuccess',function(){
logsTable.ajax.reload();
});
} );
</script>
<body class="dt-example">
<div class="container">
<table id="userlist" class="display">
<thead>
<tr>
<th>Card</th>
<th>ID</th>
<th>Access</th>
</tr>
</thead>
</table>
</div>
<div class="container">
<table id="reclist" class="display">
<thead>
<tr>
<th>Date</th>
<th>Card</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
Do you mean this:
It appears to work okay here: http://live.datatables.net/nuvihosi/22/edit .
Can you link to a page showing the issue please?
Allan
http://live.datatables.net/nuvihosi/22/edit is a single table. where my case is two linked tables.
That shouldn't make any difference to the minDate / maxDate options. Could you link to a page showing the issue so I can debug it please? I've not been able to replicate the error locally.
Thanks,
Allan