I want to use export excel and print the datatable .I use following code but not able to use both options for selected columns.
$('#example').DataTable( {
dom: 'Blfrtip',
buttons: [
{
extend: 'excel','print',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
}
],
"lengthMenu": [[200, 250, 500, -1], [200, 250, 500, "All"]],
"bLengthChange" : true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value="">Select</option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
I am not figure out what happens wrong.Please help me.
{
extend: 'excel'
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
{
extend: 'print'
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
One of the most commonly used is the columns option which defines the columns that should be used as part of the export. This is given as a column-selector, making it simple to tell it if you want only visible columns, or a mix of the columns available.
and this is a simple of how it can be done :
function attachDataTable(tableId: string) {
let companyFunctionTable = $('#' + tableId).DataTable({
dom: 'Bfrtip',
buttons: [
//'csvHtml5'
{
extend: 'csvHtml5',
exportOptions: {
columns: [0, 1, 2]
},
className: 'btn btn-sm btn-outline-secondary',
text: `<i class="fa fa-file-csv"></i> ${i18next.t('Export to CSV')}`, titleAttr: i18next.t('Export to CSV'),
bom: true
},
],
"initComplete": function (settings, json) {
placeToolbarButton(tableId);
},
"paging": globalVar.dataTablesSettings.paging,
"stateSave": false,
"stateSaveParams": function (settings, data: any) {
data.search.search = "";
},
"order": [],
"lengthChange": false,
"pageLength": globalVar.dataTablesSettings.pageLength,
"language": {
"url": globalVar.dataTablesSettings.languageUrl
}
});
}
Please fellow that link :
https://datatables.net/extensions/buttons/examples/html5/columns.html
Don't forget to include the required JS libraries needed to display the exporting functionality.
Just modify your buttons option this way
buttons: [
{
extend: 'excel',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
},
{
extend: 'print',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
},
]
elaborated #tdymicroit answer
Related
I'm trying to display data from laravel backend into Vue3 (vue-google-charts), but I didn't find any resources
this is a sample if my json data comming from backend
[
{
interest_oid: 1,
total_cards: 2
},
{
interest_oid: 3,
total_cards: 1
},
{
interest_oid: 5,
total_cards: 2
},
{
interest_oid: 2,
total_cards: 1
},
{
interest_oid: 4,
total_cards: 1
},
{
interest_oid: 8,
total_cards: 1
}
]
i want to display the data in GChart of type "CulomnChart"
like this one
this is my Vue component
<div class="col-lg-6">
<GChart
type="ColumnChart"
:data="chartData"
:options="chartOptions"
style="height: 100%"/>
</div>
import {GChart} from "vue-google-charts";
export default {
components: {
GChart
},
props: {
contacts_per_interests: Array,
},
data() {
return {
chartData: this.contacts_per_interests,
chartOptions: {
width: 500,
height: 300,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
}
}
}
}
but it's display "× Table has no columns"
any resources or suggestions please?
Your contacts_per_interests array should be look like this:
[
['interest_oid', 'total_cards'],
[1, 2],
[3, 1],
[5, 2],
[2, 1],
[4, 1],
[8, 1],
]
Adjust accordingly. Like that:
$json = '[
{
"interest_oid": 1,
"total_cards": 2
},
{
"interest_oid": 3,
"total_cards": 1
},
{
"interest_oid": 5,
"total_cards": 2
},
{
"interest_oid": 2,
"total_cards": 1
},
{
"interest_oid": 4,
"total_cards": 1
},
{
"interest_oid": 8,
"total_cards": 1
}
]';
$jsonArr = json_decode($json);
$array = [['interest_oid', 'total_cards']];
foreach ($jsonArr as $item) {
array_push($array, [$item->interest_oid, $item->total_cards]);
}
I am using keentheme's Metronic admin template. It has KTDatatables. I can see page length options now as:
5, 10, 30, 50, 100
I want to change it to, to show all records:
5, 10, 30, 50, 100, All
My datatable code:
var datatable = $("#attendance_datatable").KTDatatable({
data: {
type: "remote",
source: baseUrl + "/Hrms/AttendanceManagement/getEmployeesAttendance/",
pageSize: 10,
},
layout: {
scroll: true,
footer: false,
},
sortable: true,
pagination: true,
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"],
],
search: {
input: $("#attendance_datatable_search_query"),
key: "generalSearch",
},
columns: [
{
field: "emp_name",
title: "Employee Name",
width: 120,
},
{
field: "attendance_date",
title: "Date",
width: 85,
},
],
});
};
I have tried following:
https://datatables.net/examples/advanced_init/length_menu.html
Change lengthMenu option
lengthMenu: [
[5, 10, 30, 50, 100, -1],
[5, 10, 30, 50, 100, "All"],
],
This should work
I edited as below and it worked code.
You changes "lengthMenu" -> toolbar needs to be added, changes it as follows to chage the pagination.
toolbar: {
// toolbar placement can be at top or bottom or both top and bottom repeated
placement: ['bottom'],
// toolbar items
items: {
// pagination
pagination: {
// page size select
pageSizeSelect: [5, 10, 20, 30, 50, 999], // display dropdown to select pagination size. -1 is used for "ALl" option
},
}
}
I have a datatable but sorting on its date column treats the data as a text instead of a date. I'm trying to make it sort as a date instead but stuck on it.
I tried adding datetime sorting plugin but it didnt work, or I couldnt make it work.
Here's the complete script of the page
$(document).ready(function () {
$('.datetimeclass').datepicker({
format: "dd/mm/yyyy",
language: "tr"
});
var responsiveHelper_dt_basic = undefined;
var breakpointDefinition = {
laptop: 1366,
tablet: 1024,
phone: 480
};
$('#dt_basic').dataTable({
// Tabletools options:
// https://datatables.net/extensions/tabletools/button_options
"sDom": "<'dt-toolbar'<'col-sm-4 col-xs-4 hidden-xs'T>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i>>",
"oTableTools": {
"aButtons": [
"copy",
//"csv",
"xls",
{
"sExtends": "print",
"sMessage": "Generated by Derimod <i>(press Esc to close)</i>"
}
],
"sSwfPath": "/Scripts/plugin/datatables/swf/copy_csv_xls_pdf.swf",
"columnDefs": [
{ "type": "datetime", targets: 7 }
]
},
"autoWidth": true,
"preDrawCallback": function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_dt_basic) {
responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
}
},
"rowCallback": function (nRow) {
responsiveHelper_dt_basic.createExpandIcon(nRow);
},
"drawCallback": function (oSettings) {
responsiveHelper_dt_basic.respond();
}
, paging: false
// , "aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
//"iDisplayLength": 10,
//,'sPaginationType': 'full_numbers'
});
});
How can I solve my problem?
EDIT: An example of my date format: 14.6.2017 11:49:47
I am using https://github.com/Mottie/Keyboard to enter inputs in the Handsontable. I call keyboard on 'afterSelectionEnd' on text editor element which has class 'handsontableInput' and it appears just below cell.
When I have single table on page, it works perfectly.
But when there are multiple tables on page, result is different. Here are Steps to reproduce the problem
function keyboard()
{
$('.handsontableInput').keyboard
({
layout: 'custom',
customLayout: {
'default' : [
'a s d f g h j k',
'a s d f g h j k',
'a s d f g h j k'
],
},
})
.getkeyboard().reveal();
}
$(document).ready(function () {
function getData() {
return [
["", "Kia", "Nissan", "Toyota", "Honda"], ["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13]];
}
var container1 = document.getElementById('example1');
var container2 = document.getElementById('example2');
var hot1 = Handsontable(container1, {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}],
afterSelectionEnd : function (instance,col,row,td){
this.getActiveEditor().beginEditing();
keyboard();
},
});
var hot2 = Handsontable(container2, {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}],
afterSelectionEnd : function (instance,col,row,td){
this.getActiveEditor().beginEditing();
keyboard();
},
});
})
Please refer jsfiddle http://jsfiddle.net/yd0fucct/5/ to reproduce problem.
I have also posted Issue on Handsontable Github page
Click on the cell of first table, keyboard appears below cell which is good
Click on the cell of second table. Result : keyboard appears in left top of page
Again click in the same cell of second table. Result : Keyboard appears just below cell which is good
Expected behavior : When user clicks on cell of second table first time ( step 2 ), it should appear immediately below it.
Please guide to solve this problem.
When we click the second table first the issue does not occur. It happens only when we click the above table first.
Refer this GitHub issue for solution
var lastInput;
function keyboard() {
var kb,
$input = $(':focus');
if ($input.length) {
lastInput = $input;
// close the last keyboard
kb = lastInput.getkeyboard();
if (kb) {
kb.close(true);
}
if (!$input.hasClass('.ui-keyboard-input')) {
$input.keyboard({
usePreview: false,
initialFocus: false,
layout: 'num'
});
}
$input.getkeyboard().reveal();
}
}
I want to create a bar chart with time duration on the bottom axis. It' working for decimal numbers, like 300.5 seconds, or 50.3 hours, but i would like to have the following format:
Hours:Minutes:Seconds. I tried some thing with datalabelformat: datetime, but with no success.
The data would be for example:
Member1 - 10:05:18
Member2 - 12:52:20
Member3 - 18:10:30
Member4 - 19:20:10
Member5 - 19:30:45
Anybody got an idea how to realize that?
Thanks in advance!
You need to set min value and tickInterval, then set dateTimeLabels.
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
}
Example:
http://jsfiddle.net/TynTT/1/
I came here searching for a solution to my problem. Not sure if this is exactly what you want, and I cannot put in a comment due to low reputation. But this is how I was able to solve it.
This provides result in hh:mm. You can modify it to include seconds.
http://jsfiddle.net/TynTT/11/
It has the y axis in hh:mm format and also displays datalabels as hh:mm.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
yAxis: {
type: 'time',
labels: {
formatter: function () {
var time = this.value;
var hours1=parseInt(time/3600000);
var mins1=parseInt((parseInt(time%3600000))/60000);
return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
}
}
},
series: [{
data: [1000000, 26500000, 17000050, 79000000, 56000000, 124000000],
dataLabels: {
enabled: true,
formatter: function () {
var time = this.y / 1000;
var hours1=parseInt(time/3600);
var mins1=parseInt((parseInt(time%3600))/60);
return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
}
},
}]
});
});
I improved above configs by reusing the HC methods:
durationbar: {
chart: {
type: 'column'
},
yAxis: {
type: 'datetime',
showFirstLabel: false,
dateTimeLabelFormats: {
millisecond: '%H:%M:%S'
},
units: [[
'millisecond',
[1000]
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]],
},
tooltip: {
formatter: null,
pointFormat: '{point.name}: <b>{point.dataLabel.text.textStr}</b><br/>'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter() {
return this.series.chart.time.dateFormat('%H:%M:%S', this.y)
}
}
}
}
},
screenshot