I have a table with start and finish dates in the rows, and I want to create a date filter which chooses rows for which the date in the filter is between the start and finish dates. The start or finish dates might be empty which means "unspecified" so the range is open on that side of the start/finish span.
I messed around with range date on the two columns but wasn't able to get that to work, and decided the best solution was probably to use the date_custom_func. This works for the most part, but seems like clearing the date in the filter causes the filterVal in the custom_func to be passed the last value of the filter rather than ''.
I think this is a bug but know https://stackoverflow.com/users/617373/daniel prefers to see things first on stackoverflow to triage.
Reference https://jsbin.com/cixawez/edit?html,js,output
Steps to cause problem:
pick filter date
click x to clear
last filter date is used
Second problem is exFilterColumn doesn't seem to have any case handling for filter_type = 'date_custom_func', so has no effect on the filter.
My initialization:
$(document).ready(function() {
var table = $("#tbl").DataTable({
dom: "Bfrtip",
columns: [
{ data: 'name', name: 'name' },
{ data: 'startdate', name: 'startdate', type: 'datetime' },
{ data: 'finishdate', name: 'finishdate', type: 'datetime' },
],
});
function yadcf_between_dates(fromdateattr, todateattr) {
function yadcf_between_dates_fn(filterVal, columnVal, rowValues, stateVal) {
console.log('filterVal='+filterVal);
console.log('columnVal='+columnVal);
console.log('rowValues='+rowValues);
console.log('stateVal='+stateVal);
if (filterVal === '') {
return true;
}
if ( (stateVal[fromdateattr] === '' || filterVal >= stateVal[fromdateattr])
&& (stateVal[todateattr] === '' || filterVal <= stateVal[todateattr])) {
return true;
} else {
return false;
}
}
return yadcf_between_dates_fn;
}
yadcf.init(
table,
[
{
column_selector: 'startdate:name',
filter_type: 'date_custom_func',
custom_func: yadcf_between_dates('startdate', 'finishdate'),
filter_container_id: 'filter-container',
date_format: 'yyyy-mm-dd',
},
]
);
// second problem is exFilterColumn doesn't seem to work for date_custom_func, there's
// no case handling for that filter_type
var today = new Date();
today = today.toISOString().substr(0,10);
var startdate = table.column('startdate:name').index();
yadcf.exFilterColumn(table,[[startdate, today]]);
});
the html (for completeness)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.jqueryui.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.jqueryui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.45/jquery.dataTables.yadcf.css" integrity="sha512-u7Rj4AxBJlMX6GXYVig6earpVdk4dxdZfT2nJFo2OJmB9j2PSY7CrIRtXWuELPTZbLdqk7oNQlsnxOfhYA7KSw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4-beta.45/jquery.dataTables.yadcf.js" integrity="sha512-iOI77irpDUJ8r06rUaeBfn6ZUmsWZJB0PsmZdtRuHjfhkw5JhmBXvxl1frwrxBHlD/pUUIEeDln/njSvcZx5sA==" crossorigin="anonymous"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<span>in start/finish span: </span><span id='filter-container'></span>
<table id=tbl>
<thead>
<tr>
<th>name</th>
<th>start</th>
<th>finish</th>
</tr>
</thead>
<tbody>
<tr>
<td>fred</td>
<td>2020-01-19</td>
<td></td>
</tr>
<tr>
<td>jill</td>
<td>2020-12-20</td>
<td>2020-12-31</td>
</tr>
<tr>
<td>toby</td>
<td>2020-12-20</td>
<td></td>
</tr>
</tbody>
</table>
</body>
Related
When exporting my dataTable to a PDF I'd like to add an extra blank column that doesn't exist on the dataTable itself. All it needs is the headline and a blank field for each row. Is that possible somehow?
I was able to add a custom column by adding the following to my exportOptions in my dataTabel config:
customizeData: function (data) {
data['header'].push('Custom Field');
$.each(data['body'], function(key, row) {
row.push('');
});
}
You can add an extra empty column to the PDF by manipulating the PDFMake document structure.
You can access this structure using the pdfHtml5.customize function.
A simple demo:
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'pdf',
customize: function (pdf) {
addExtraColumn(pdf);
}
}
]
});
});
function addExtraColumn(pdf) {
pdf.content[1].table.body.forEach(function(row, idx) {
let newCell = structuredClone(row[0]);
newCell.text = idx === 0 ? "New Heading" : "";
row.push( newCell );
console.log( row );
})
};
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Export to PDF</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adelaide Nixon</td>
<td>One</td>
</tr>
<tr>
<td>Bruna Nash</td>
<td>Two</td>
</tr>
</tbody>
</table>
</div>
</body>
So, if you start with a table which looks like this:
Then the PDF will look like this:
From there, you may want to further customize the PDF - for example, by drawing lines around every cell, and so on.
You can read the PDFMake documentation for tables, and see examples for more guidance.
I am trying to display data fetched from an SQL table named student. I have JSON object containing data retrieved from table using PHP file. But i can't display data in my HTML file using AngularJS.
Here is my myScript.js code
var myApp = angular.module("myModule",[])
.controller("myController",function($scope,$http)
{
getData();
function getData(){
$http.post("php/display.php").success(function(data)
{
$scope.student=data.data;
});
}
});
Here is my index.html file
<html ng-app="myModule">
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="myController">
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>CITY</th>
</tr>
<tr ng-repeat="stud in student">
<td>{{stud.id}}</td>
<td>{{stud.name}}</td>
<td>{{stud.city}}</td>
</tr>
</table>
</body>
</html>
Also response of my display.php file is json object in the form
[{"Id":"1","name":"Swapnil","city":"Nanded"},
{"Id":"2","name":"Swap","city":"Nanded"},
{"Id":"3","name":"Swapn","city":"Nanded"},
{"Id":"4","name":"Swapni","city":"Nanded"},
{"Id":"5","name":"Swap","city":"Parbhani"}]
You need to use the data object from the request result:
$http.post("php/display.php").success(function(result) {
$scope.student = result.data;
});
I'm trying to sum a computed property (effectively sum a column in a table), but it returns 0 (Total Net - bottom of last column). See fiddle: https://jsfiddle.net/2djreyds/ I think it has to do with how I am referencing the computed property. Sure its something simple! Any ideas? or if there's a smarter way to do this let me know! :) Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Tutorial | More Computed Properties</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app" class="container">
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Phase</th>
<th>Labour Budget</th>
<th>Labour Hours</th>
<th>Labour Cost Rate</th>
<th>Labour Cost</th>
<th>Overhead Cost</th>
<th>Net</th>
</tr>
</thead>
<tbody>
<tr is="data-row" v-for="record in records" :record="record"></tr>
<tr>
<td></td>
<td></td>
<td>Total Hours: {{totalHours}}</td>
<td></td>
<td></td>
<td></td>
<td class="alert alert-info">Total Net: {{totalNet}}</td>
<tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<script type="text/x-template" id ="data-row">
<tr>
<td>{{record.phase}}</td>
<td>{{record.labourBudget}}</td>
<td><input type="number" v-model="record.labourHours"></td>
<td><input type="number" v-model="record.labourCostRate"></td>
<td>{{labourCost}}</td>
<td>{{overheadCost}}</td>
<td>{{net}}</td>
<tr>
</script>
<script>
var app = new Vue({
el: '#app',
data: {
records: [
{phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45},
{phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42}
]
},
components:{
'data-row':{
template: "#data-row",
props: ["record"],
data:function(){
return this.record;
},
computed:{
labourCost: function(){
return this.record.labourHours * this.record.labourCostRate;
},
overheadCost: function(){
return this.labourCost * 1.36;
},
net: function(){
return this.record.labourBudget-this.labourCost-this.overheadCost;
}
}
}
},
computed:{
totalHours: function(){
var sum = 0;
var items = this.records;
for (var i in items){
sum += items[i].labourHours;
}
return sum;
},
totalNet: function(){
var sum = 0;
var items = this.$children;
for (var i in items){
sum += items[i].overheadCost;
}
return sum;
}
}
})
</script>
</html>
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable( {
"fnDrawCallback": function( oSettings ) {
if ($(".dataTables_empty")[0]) {
$('#newclient').prop("disabled", false);
} else {
$('#newclient').prop("disabled", true);
}
}
} );
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="add-client"><button type="button" class="btn btn-primary btn-sm" id="newclient" disabled="true">Add Client</button></div>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Name</th>
<th>File Number</th>
<th>Department</th>
<th>Date</th>
<th>User Name</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Mbello Elizabeth</td>
<td>954687</td>
<td>w547</td>
<td>October 15 2013</td>
<td>Mbello</td>
<td>cfhqsuvx</td>
</tr>
</tbody>
</table>
I'm using DataTables and I need to enable a button when no results found after searching, Any one can help me please.
Thanks
it works here but it dosen't work in my page, I don't know what is the problem
You could use the DataTables draw callback to find out if there are no results in the current table. fnDrawCallback
This is a simple fiddle to check how to enable a button after searching with no results.
Javascript:
$(document).ready(function () {
$('#example').dataTable( {
"fnDrawCallback": function( oSettings ) {
if ($(".dataTables_empty")[0]) {
$('#test').prop("disabled", false);
} else {
$('#test').prop("disabled", true);
}
}
} );
});
How do I initialise specific tables without the search filter and length select menu?
Apparently it can be done with the sDom option, but the documentation is pretty bad and I can't understand exactly what I am supposed to do.
http://datatables.net/usage/options#sDom
You can set to false such properties during initialization of datatable:
"bFilter" : false,
"bLengthChange": false
Since Datatables 1.10 you can use those 2 options :
lengthChange
"lengthChange": false
searching
"searching": false
Full example :
$('#example').dataTable( {
"lengthChange": false,
"searching": false
} );
Without search filter and length
var options = {"sDom": 'rtip'}
var myDataTable = $('#myDataTable')
myDataTable.dataTable(options)
Here is an example from the official documentation: https://datatables.net/examples/basic_init/dom.html
I agree that sDom is tricky, I got the hang of it by practicing. Run the example below and see the "info" will appear in the top. Replace sDom with "sDom": 'rtlp' and see info disappear. Now use "sDom": 'rtil' and see info is back at the bottom, but paging is gone. Keep experimenting and you will get it.
<!DOCTYPE html>
<html>
<head>
<link href="demo_table.css" rel="stylesheet">
</head>
<body>
<table class="display dataTable" id="example">
<thead>
<tr role="row">
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
</table>
<script src="jquery.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"aaData": [
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"sDom": '<"top"i>rtlp'
} );
} );
</script>
</body>
</html>