Enable button on row select

johnmay

Hi

I have added a custom button that I need to be disabled until a row is selected. What's the easiest way to achieve this?

Thanks

kthorngren

Use the select event and in the event use button().enable() to enable the button. Conversely use the deselect to disable the button. This example will show how to get the selected row count to see if there are selected rows before disabling the button.

Kevin

johnmay

Thanks Kevin. I'm trying to use the select event but can't get it to fire. Be great if you could take a look at my code...

var table = $('#projTable').dataTable(
                        {
                            processing: true,
                            "ajax": {
                                url: 'http://localhost:3001/v1',
                                type: "Get",
                                dataSrc: ""
                            },
                            "columnDefs": [
                                {
                                    "targets": [0,4,5,6,7,8,9,10,12],
                                    "visible": false
                                },
                                {
                                    "targets": [1],
                                    "responsivePriority": 1
                                },
                                {
                                    "targets": [2],
                                    "responsivePriority": 2
                                },
                                {
                                    "targets": [11],
                                    "responsivePriority": 3
                                }
                            ], 
                            "columns":[
                                {"data": "projId"},
                                {"data": "projName"},
                                {"data": "custId"},
                                {"data": "projDesc", sortable: false},
                                {"data": "projAdd1", sortable: false},
                                {"data": "projAdd2"},
                                {"data": "projCity"},
                                {"data": "projCounty"},
                                {"data": "projPostcode"},
                                {"data": "projStartDate"},
                                {"data": "projEndDate"},
                                {"data": "projStatus"},
                                {"data": "projContacts"}
                            ],
                            select: true,
                            select: 'single',
                            order: [[ 1, "asc" ]],
                            dom: 'Bfrtip',
                            buttons: [
                                {extend: 'create', editor: editor, titleAttr: 'Add new project'},
                                {extend: 'edit', editor: editor, text: "View / Edit", titleAttr: 'Modify selected project information'},
                                {extend: 'remove', editor: editor, titleAttr: 'Remove the selected project'},
                                {text: 'View / Edit', enabled: false, action: function (e, node, config) {
                                    $('#projDetailModal').modal('show');
                                    }
                                },
                                {extend: 'csv', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Export CSV'},
                                {extend: 'pdf', text: '<i class="fa fa-file-pdf-o"></i>', titleAttr: 'Export PDF'}
                            ],
                            language: {
                                emptyTable: "You haven't added any projects. Click New to get started.",
                                loadingRecords: "Getting records..."
                            },
                            responsive: {
                                details:
                                {
                                    type: false,
                                    renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                                    tableClass: 'table table-striped table-bordered'
                                } )
                                }
                            }
                        }
                    )
                    .on( 'select', function ( e, dt, type, indexes ) {
                        console.log('Table row selected');
                    } );

kthorngren

Looks like it should work. Did you add the select extension JS and CSS? You can use the Download Builder to get the code.

Kevin

weskey

Using this...

<!-- DataTables -->
                <link href="plugins/DataTables/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" />
                <link href="plugins/DataTables/Buttons-1.5.4/css/buttons.bootstrap.min.css" rel="stylesheet" type="text/css" />d
                <link href="plugins/DataTables/Editor-2019-03-07-1.8.1/css/editor.bootstrap.min.css" rel="stylesheet" type="text/css" />
                <link href="plugins/DataTables/Select-1.2.6/css/select.bootstrap.min.css" rel="stylesheet" type="text/css" />
                <link href="plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />

<!--JQuery Datatables-->
            <script src="plugins/DataTables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
            <script src="plugins/DataTables/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
            <script src="plugins/DataTables/Buttons-1.5.4/js/dataTables.buttons.min.js"></script>
            <script src="plugins/DataTables/Buttons-1.5.4/js/buttons.bootstrap.min.js"></script>
            <script src="plugins/DataTables/Select-1.2.6/js/dataTables.select.min.js"></script>
            <script src="plugins/DataTables/Editor-2019-03-07-1.8.1/js/dataTables.editor.min.js"></script>
            <script src="plugins/DataTables/Editor-2019-03-07-1.8.1/js/editor.bootstrap.min.js"></script>
            <script src="plugins/DataTables/Buttons-1.5.4/js/buttons.html5.min.js"></script>
            <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
            <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
            <script src="plugins/DataTables/editor.select2.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

kthorngren

You may need to change this:

var table = $('#projTable').dataTable(

to this:

var table = $('#projTable').DataTable(

Noticed the upper case D in DataTable. This discusses the differences:
https://datatables.net/manual/api#Accessing-the-API

Kevin

johnmay

That did it. Great spot! Thank you.