How to invoke Export, Print button on click functionality for bootstrap buttons

sanjeevmambat

Hello,

I just want to know to invoke on click functionality of datatables button to my bootstrap buttons , without initializing datatables buttons.?

on click of bootstrap button Export or print of Datatables should work.

I am defining like this
datatableID.buttons('.buttons-print').trigger();

But for this to work there should be datatables buttons initialised which i dont want.

Can anyone help my out regarding this. ?

Thanks

allan

If you want the functionality of the Buttons library, you would need to actually use that library. Its actions are not available via an external API.

Can I ask why you want to use your own bootstrap buttons rather than the bootstrap buttons that Buttons renders?

Allan

sanjeevmambat

Hello Allan,

Thanks for the quick reply. I have my own custom toolbar defined where i have different functionalities. I have changed the look and feel of the buttons as required with icons and all.
The thing is i dont want one more layer of datatables buttons, so i would like to define the functionality of datatable buttons for my own buttons..

allan

What you can do is use the DataTables buttons but just insert them somewhere else into the document (which you can do using the buttons().container() method to get their container node, and then use jQuery to inject it anywhere into the document). That way you could put the Buttons defined buttons into wherever your other buttons are.

Allan

sanjeevmambat

Hello Allan,

Thanks.. It worked.

sanjeevmambat

Dear Team,
we are using the following example, there we have only one check box column.
https://editor.datatables.net/examples/api/checkbox.html

But we want check box for the multiple columns.

In this below method how to identify the multiple columns(like Active,Status,Expat) and assign the checked flag.

rowCallback: function ( row, data ) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop( 'checked', data.active == 1 );
}

Please furnish solution ASAP

Regards,
Rsanjeev

allan

Hi Rsanjeev,

The key here is to have a different class for each checkbox. In the example the checkboxes use the class editor-active. You could use editor-status and editor-expat for checkboxes in other columns. You'd need to add suitable event listeners for those new classes as well.

Regards,
Allan

sanjeevmambat

Hi Allan,

Thanks for the reply, I have implemented the same way its working.
But I am facing the problem for the following scenarios.
In my case I am using Y or N flag instead of using 1 or 0 values.

var editor = new $.fn.dataTable.Editor( {
                        "table": "#exmaple",
                        idSrc:  'srlRoleKey',
                        "fields": [
                             {
                                "name":      "active",
                                "type":      "checkbox",
                                "separator": "|",
                                "options":   [
                                    { "label": '', "value": 'Y' }
                 
                                ]
                             },
                             {
                                "name":      "status",
                                "type":      "checkbox",
                                "separator": "|",
                                "options":   [
                                    { "label": '', "value": 'Y' }
                 
                                ]
                             },
                             {
                                "name":      "expat",
                                "type":      "checkbox",
                                "separator": "|",
                                "options":   [
                                    { "label": '', "value": 'Y' }
                 
                                ]
                             }
                        ]
                         
                    } );

1. when I check the check box in one row of "editor-active" then other rows of that editor-active should update to flag N.
2. but Its updating to null .

Please go through the below code

$('#example').on( 'change', 'editor-active', function () {
    var indexArr=$('#example').DataTable().rows().indexes();
    var index=$(this).closest('tr').index();
    indexArr = jQuery.grep(indexArr, function(value) {
                      return value != index;
              });
    editor.edit( $(this).closest('tr'), false )
        .set( 'active', $(this).prop( 'checked' ) ? 'Y' : 'N' ).submit();
// here im trying to update the flag to N but its updating to the table as null
// every time rowCallback function is getting called could u explain me why?
// and i dont want to call this rowCallback function when im updating other rows to N
    editor.edit(indexArr, false).set('active', 'N' ).submit();
 } );

Please give your advice

allan

The checkbox field type has an unselectedValue option that allows you to define the value that should be submitted to the server if the checkbox is not checked. Simply setting that property to be N should resolve the issue you are seeing.

Allan

sanjeevmambat

Dear Allan,

we are new to data tables, Kindly provide one example code related to our questions.

I have attached the image please check that once.

We have created one data table, that table contains the 4 columns u can check in the image. we will submit all the rows at a time one click of Save button.

Pls go through the below mentioned problems,

1. According to my functionality Shall we go through the editor or not?

2. If editor is not required how to update the status flag based on the check/uncheck ?

3. Not able to update the status flag to N whenever user unchecked the status flag. Its getting updated to empty string to row to a data table.

4. How to check / un check the checkbox through programatically for the other check boxes in a row?

5. I want to reload the data into Data table through ajax call , how to do this?

Please respond with example code ASAP.

Its urgent.

Please go through the below full code.

var editor = new $.fn.dataTable.Editor( {
"table": "#example",
idSrc:  'srlRoleKey',
"fields": [
{
"name":      "srlSoEntryBy",
"type":      "checkbox",
"separator": "|",
"options":   [
{ "label": '', "value": 'Y' }

]
},
{
"name":      "srlApprEntryBy",
"type":      "checkbox",
"separator": "|",
"options":   [
{ "label": '', "value": 'Y' }

]
},
{
"name":      "srlRevBy",
"type":      "checkbox",
"separator": "|",
"options":   [
{ "label": '', "value": 'Y' }

]
}
]

} );


loadSourceRolGrid= $('#example').DataTable( {                       
"paging":   false,
"ordering": true,
"info":     false,
"autoWidth": false,
"searching": false, 
"destroy": true,        
idSrc:  'srlRoleKey',
//"ajax":URL, 
"columns": [
        {"data":null,"orderable": false,className: "align-center"},           
        {"data": "roleDesc"},
        {"data": "srlSoEntryBy",
                render: function (data, type, row, meta) {
                    debugger;
                     if ( type === 'display' ) {
                        id =meta.row+''+meta.col;
                return '<input type="checkbox" id="srcEntry'+id+'"   class="editor-smartObject" >';
                     }
                     return data;
                 }  ,
                 className: "dt-body-center"
    }, 
        {"data": "srlApprEntryBy", 
        render: function (data, type, row, meta) {
             if ( type === 'display' ) {
                id =meta.row+''+meta.col;
                return '<input type="checkbox" id="srcApprEntry'+id+'"  class="editor-approver">';
             }
             return data;
                } ,
                className: "dt-body-center"
    }, 
        {"data": "srlRevBy",
        render: function (data, type, row, meta) {
             if ( type === 'display' ) {
                id =meta.row+''+meta.col;
                return'<input type="checkbox" id="srcRevEntry'+id+' " class="editor-appraisee">';
             }
             return data;
                } ,
                className: "dt-body-center"
        }   
    ],
        rowCallback: function ( row, data,index ) {
        debugger;
            $('input.editor-smartObject', row).prop( 'checked', (data.srlSoEntryBy == 'Y') );
            $('input.editor-approver', row).prop( 'checked', (data.srlApprEntryBy == 'Y') );
            $('input.editor-appraisee', row).prop( 'checked', (data.srlRevBy == 'Y') );
        }    

    } );
$('#example').on( 'change', 'input.editor-smartObject', function () {
debugger;
var indexArr=$('#example').DataTable().rows().indexes();
var index=$(this).closest('tr').index();
indexArr = jQuery.grep(indexArr, function(value) {
return value != index;
});
editor.edit( $(this).closest('tr'), false ).set( 'srlSoEntryBy', $(this).prop( 'checked' ) ? 'Y' : 'N' ).submit();
editor.edit(indexArr, false).val('srlSoEntryBy', 'N' ).submit();
} );
$('#example').on( 'change', 'input.editor-approver', function () {
debugger;
var indexArr=$('#example').DataTable().rows().indexes();
var index=$(this).closest('tr').index();
indexArr = jQuery.grep(indexArr, function(value) {
return value != index;
});
editor.edit( $(this).closest('tr'), false ).set( 'srlApprEntryBy', $(this).prop( 'checked' ) ? 'Y' : 'N' ).submit();
editor.edit(indexArr, false).val('srlApprEntryBy', 'N' ).submit();
} );

$('#example').on( 'change', 'input.editor-appraisee', function () {
editor.edit( $(this).closest('tr'), false ).set( 'srlRevBy', $(this).prop( 'checked' ) ? 'Y' : 'N' ).submit();
} );


// sequence gen code.
loadSourceRolGrid.on( 'order.dt search.dt', function () {
loadSourceRolGrid.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw(); 

Regads,
Sanjeev.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hi,

All I think you need to do is add the unselectedValue property that I mentioned above. i.e.:

{
    "name": "srlSoEntryBy",
    "type": "checkbox",
    "separator": "|",
        "unselectedValue": "N",
    "options": [{
            "label": '',
            "value": 'Y'
        }

    ]
}

Regarding your specific questions:

1) According to my functionality Shall we go through the editor or not?

I don't see any reason why you can't use Editor to do what you are looking to do.

2) If editor is not required how to update the status flag based on the check/uncheck ?

Editor is not required, but I think it will be easiest if you do use it.

3) Not able to update the status flag to N whenever user unchecked the status flag. Its getting updated to empty string to row to a data table.

See my comment about above using unselectedValue.

4) How to check / un check the checkbox through programatically for the other check boxes in a row?

The code you have in rowCallback should be doing that already. If is isn't can you give me a link to the page in question so I can take a look at it and debug it please.

5) I want to reload the data into Data table through ajax call , how to do this?

The ajax.reload() method can be used to reload the table's data.

Allan