How to call Datatable csv button from custom button - javascript

Need to call csv button from my custom button.
<button value="Export report to Excel" class="button-default datatable-csv" type="button" id="ExportReporttoExcel">
<span>Export report to Excel</span>
</button>
Instead of calling it from the Datatable button, i want the same functionality from the above button.
Looking for some configuration changes in Datatable so that i can call my custom button to export the table records as csv.
var table=$('#tableId').DataTable( {
"paging": true,
"info": true,
"searching": true,
,buttons: true
});
$("#SEARCH").on("keyup search input paste cut", function() {
table.search(this.value).draw();
});
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
'csvHtml5'
]
}).container().appendTo($('#ExportReporttoExcel'));
Getting output like below but i need only one button.

At last i found the solution.
In Datatable configuration , i added click event for the button to be triggered.
buttons: [
{
extend: 'csv',
}
]
$("#ExportReporttoExcel").on("click", function() {
table.button( '.buttons-csv' ).trigger();
});
This works fine for me thanks for the comments and answers

dataTables export buttons is by default enriched with signature classes like .buttons-excel, .buttons-pdf, .buttons-csv and so on. Take advantage of that :
$('#ExportReporttoExcel').on('click', function() {
$('.buttons-excel').click()
});

Say you have your own button
Export Excel
And you have your table that you are using the below code for;
$(document).ready(function () {
var table = $('#example').DataTable({
"paging": false,
"info": false,
searching: false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5'
}
]
});
});
Then all you need to do is to use this code below:
$('#example').DataTable({
"paging": false,
"info": false,
buttons: [
{
extend: 'excel'
},
{
extend: 'csv'
},
]
});
$('.button_export_excel').click(() => {
$('#example').DataTable().buttons(0,0).trigger()
})
The 0,0 points to excel and if you want to point to csv you do 0,1.

If you are trying to trigger the click event of another button and you are using jQuery (according to your tags), you can use
<button onclick="$('#ExportReporttoExcel').click()">Click me</button>
This selects the element with the id "ExportReporttoExcel" and triggers a click with using jQuery.

Related

Hide DataTables export features and pagination

I use the jQuery plugin DataTables to display tables. Then I managed to add the CSV and PDF export features by the Datatables API.
Then I have a form composed of three select options.
When a user selects an item, it shows a table.
If the user selects the second item of the select list, it switches to the second table with the export buttons associated to that second table. That is fine but it remains the export buttons of the first table.
How can I do to show the features of the first table only and hide features of the previous table ?
Here is my code :
$('select[name=tab]').change(function () {
if ($(this).val() == 'tab1') {
$('#table1').show();
$('#table2').hide();
$('#table1').DataTable({
dom: 'Bfrtip',
info : false,
buttons: [
'csv', 'excel', 'pdf'
]
});
}
else if ($(this).val() == 'tab2') {
$('#table1').hide();
$('#table2').show();
$(document).ready(function () {
$('#list-saint-iv').DataTable({
dom: 'Bfrtip',
info : false,
buttons: [
'csv', 'excel', 'pdf'
]
});
});
}
[.....]
Thank you very much !
Have something like this; you'll need to keep 2 table templates. and then destroy
the table not in use during your selection.
$( document ).ready(function() {
var tblTemplateWithoutExport = {
"paging" : false,
"info" : false,
};
var tblTemplateWithExport = {
"paging" : false,
dom: 'Bfrtip',
"info" : false,
buttons: [
'csv', 'excel', 'pdf'
]
};
var tbl1,tbl2;
tbl1 = $('#table1').DataTable(tblTemplateWithoutExport);
tbl2 = $('#table2').DataTable(tblTemplateWithExport);
$( 'select[name=tab]' ).change(function() {
if ($(this).val() == 'tab1') {
tbl2.destroy();
tbl1.destroy();
tbl1 = $('#table1').DataTable(tblTemplateWithoutExport);
}
else if($(this).val() == 'tab2'){
tbl1.destroy();
tbl2.destroy();
tbl2 = $('#table2').DataTable(tblTemplateWithExport);
}
else{
console.log('something other selection');
}
});
});

How can I reload the page after confirmation of file export in Datatable?

I am following this example:
https://datatables.net/extensions/buttons/examples/initialisation/export
I want if I confirm the file exporting , the page will reload. How can I do this?
You can customize the button's action. Try this :
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{//Start the creation of the button
extend: "csv",//It's a button that export the table dtat into a CSV file
text: "export and relode",//The text of the button
action: function(e, dt, button, config) {
//The action of the button
$.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config);//Export the data
window.location.reload(false);//Relode the page
}
}
]
});
});
Here is a working Fiddle

rows not saving in pagination for jquery datatables table with multiple row selection

I was able to successfully implement Datatables using the jQuery library. The problem is that when i click on page 2 in the pagination area it acts fine however when I go back to page 1 the records i selected are no longer selected.
Here is what it's supposed to do: datatables select row example
I updated my datatables to version: 1.10.15
Here is my call to handle the click event:
$("#datatable_users tbody").on("click","tr",function(){$(this).toggleClass("selected");});
Here is my code for creating the DataTable:
$("#datatable_'.$ref.'").dataTable({
"iDisplayLength": '.$itemlimit.',
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.12/i18n/English.json"
},
"processing": true,
"serverSide": true,
"ajax": { // define ajax settings
"url": \''.Pluto::registry('web_base_uri').'service/datatable?req=1&ref='.$ref.'\',
"data": function(data) {
var datafilter= $("form#JqueryDataTableFormFilter_'.$ref.'").serializeControls();
$.each(datafilter, function(key, value) {
data[key] = value;
});
//console.log(datafilter);
}
},
"orderCellsTop": true,
"dom": "Bfrtip",
buttons: [
{
"text": "'.$search_label.'",
"className":"btn btn-default BtnjQueryDataTableFilter",
"action": function ( e, dt, node, config ) {
dt.ajax.reload();
}
}
]
});
As in server side processing the DataTable gets redrawn when you paginate so you need to keep track of what all was selected before clicking the next page and manually highlight the selected rows after each page click.
Here's an exact same working example featured on their website.
https://datatables.net/examples/server_side/select_rows.html
Let me know if you have any questions.

Callback action is not firing for columnsToggle button

In the following JSFiddle the action function does not fire whenever a button to select a column in the column visibility button is selected. Below is the code that I am using:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'B',
"buttons": [
{
extend: 'colvis',
postfixButtons: ['colvisRestore'],
buttons : [{
extend: 'columnsToggle',
action: function (e, dt, node, config) {
alert('Activated!');
console.log("Activated!");
},
}],
}
],
}
);} );
I would really appreciate your help on this one.
CAUSE
Button columnsToggle doesn't have action option as opposed to colvis button.
SOLUTION
Handle column-visibility event which is fired when the visibility of a column changes.
$('#example').on('column-visibility.dt', function(e, settings, column, state ){
console.log('Column:', column, "State:", state);
});
DEMO
See updated jsFiddle for code and demonstration.

Add Custom button at end of fields in Jquery - jTable Create/Update mode like submit button

At jquery- jTable we can have some fields and actions . I need Other button [possible at end of page] near by Jquery JTable button("Submit" button) that after on Click , run another function . so
this is my code :
$('#RequestSubmitDiv').jtable({
title: 'newRec',
paging: false,
sorting: false,
selecting:false;
selectingCheckBoxes:false,
selectOnRowClick:false,
jqueryuitheme:true,
formCreated:function(event,data){
data.form.validationEngine();
},
formSubmitting:function(event,data){
...
...
},
formClode: function(d,e){...} ,
actions: {
createAction: '/Adminsec/ManageAssets.aspx/CreateOrUpdate',
//---not need below
//listAction: '/Adminsec/ManageAssets.aspx/List',
//updateAction: '/Adminsec/ManageAssets.aspx/CreateOrUpdate',
//deleteAction: '/Adminsec/ManageAssets.aspx/Deletes'
//-!!---Other Button and Action Need ---!!
CustomAction:{
title:'RefreshNew',
sorting:false,
create:false,
edit:false ,
list:false ,
display:function(data){
return '<input type='button' id='MyBtn' onclick='Call_Mehod();>';
}
}
},
fields: {
ID {title:'pk',type:'textarea'} ,
RequestNO{type:'textarea'},
description{type:'textarea'}
}
});
How can i add some button to Jquery- Jtable and call function ?
these buttons don't repeat at rows or column , i mean it should be One instance after fields scope.
Maybe I misunderstood but if you want to add a button on each row, you can use display property of the field. I created a dummy field and added the display property. Somthing like this:
...
Other: {
title: 'Other',
display: function (data) {
return '<b>test</b>';
},
create: false,
edit: false
}
...
However, if you wanted to add a general feature (i.e. single button for the table) , you can take a look at the toolbar property.
I did as follow. The tag <button> and class="jtable-command-button" are always required. The next step is your class for icon and finally the event.
actions: {
title: 'Actions',
width: '1%',
sorting: false,
create: false,
edit: false,
list: true,
display: function (data) {
if (data.record) {
// This if you want a custom edit action.
return '<button title="Edit" class="jtable-command-button jtable-edit-command-button" onclick="alert(' + data.record.id + '); return false;"><span>Edit</span></button>';
}
}
}

Categories