Answers

• kthorngren Posts: 21,854Questions: 26Answers: 5,050

  April 2019 edited April 2019

  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 Posts: 10Questions: 3Answers: 0

  April 2019

  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 Posts: 21,854Questions: 26Answers: 5,050

  April 2019

  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 Posts: 12Questions: 5Answers: 0

  April 2019

  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 Posts: 21,854Questions: 26Answers: 5,050

  April 2019 Answer ✓

  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 Posts: 10Questions: 3Answers: 0

  April 2019

  That did it. Great spot! Thank you.