I have used the datatables in my html page.
I have inserted a pdf button which will save the document/table in pdf format.This is a default feature in datatables.
However, the button is not working though it is displayed in the html page.
Below is my code :
datatable.html
<html>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/media/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/extensions/TableTools/js/dataTables.tableTools.js"></script>
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/extensions/TableTools/css/dataTables.tableTools.css">
<!--<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>-->
<body>
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
<script>
$(document).ready( function () {
var data = [
[
"Tiger Nixon",
"System Architect"
],
[
"Garrett Winters",
"Accountant"
]
];
$('#example').dataTable({
"aaData": data,
"dom" : 'T<"clear">lfrtip',
"tableTools" : {
"sSwfPath": "DataTables-1.10.7/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
}
});
} );
</script>
</body>
</html>
What to do ?
Try this :
add following js and css in following sequence :
https://www.datatables.net/release-datatables/media/js/jquery.js
https://www.datatables.net/release-datatables/media/js/jquery.dataTables.js
https://www.datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js
https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css
<table id="example" class="display">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
$(function () {
var data = [
[
"Tiger Nixon",
"System Architect"],
[
"Garrett Winters",
"Accountant"]
];
$('#example').dataTable( {
"aaData": data,
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
} );
});
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 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>
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);
}
}
} );
});