Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  August 2020

  You can use the code in this example to determine the number of selected rows.
  https://datatables.net/extensions/select/examples/api/get.html

  In the select and deselect events you can use that code snippet to enable/disable the button.

  Kevin
• jtr1812 Posts: 11Questions: 4Answers: 0

  August 2020

  Thanks, I saw that example and maybe I didn't fully understand on how to use it with checkbox. I'm using the snippet to get the number of selected rows which is working correct as it should when I select each row. However, in my case, since I'm using checkbox selection, this line of code does not trigger.

  var count = myTable.rows( { selected: true } ).count();
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  August 2020

  It looks like you are using the Gyrocode checkboxes plugin which will work with the select events. You may need to use select.dt for the selector. Here is a simple example:
  http://live.datatables.net/kedilego/1/edit

  Kevin
• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  August 2020

  I added the deselect event to the example:
  http://live.datatables.net/kedilego/2/edit

  Kevin
• jtr1812 Posts: 11Questions: 4Answers: 0

  August 2020

  Thanks again as this is very helpful but I guess I must do something wrong here because the behavior is the same. The count will only trigger if I select the row.

  Here is what I have. Can you help to review to see what I do wrong here.

                  var myTable = $('#mytable').DataTable({
                    'data': result,
                    'paging': false,
                    'searching': false,
                    'columns': [
                       {
                          'data': 'ID',
                          'checkboxes': {
                            'selectRow': true
                          }
                       },
                       { 'data': 'PRODUCT_CATEGORY' },
                       { 'data': 'PRODUCT_NAME' },
                       { 'data': 'PRODUCT_DETAILS }
                    ],
                    'select':{
                          'style':'multi'
                      },
                    'order': [[1, 'asc']],
                  });
                  
                  $('#mytable').on('select.dt', function () {
                      var count = myTable.rows( { selected: true } ).count();
                      console.log(count);
                  });
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  August 2020

  In the second example I added the select event, like this:

  $('#mytable').on('select.dt deselect.dt', function () {
      var count = myTable.rows( { selected: true } ).count();
      console.log(count);
  });
  

  Kevin
• jtr1812 Posts: 11Questions: 4Answers: 0

  August 2020

  I might just remove the checkbox because I can't figure out how to get the counter to trigger properly. I added the select event just as you showed above but once again, it does not working if I just select the checkbox. I have to select the entire row for it to work properly. I'm attaching some images here to better explain the behavior that I am seeing. Noticed how the first image does not provide the count as it should.
  
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  August 2020 Answer ✓

  The only thing I can think of is you are loading the select and Gyrocode includes in the wrong order. The Gyrocode plugin requires the Select extension so select needs to be loaded first. I reversed them in this example and the problem you described is replicated:
  http://live.datatables.net/zamotimu/1/edit

  Make sure to load them in this order:

  <link href="https://nightly.datatables.net/select/css/select.dataTables.css?_=5362e195cd0aabf9b8ced350de2d5907.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=5362e195cd0aabf9b8ced350de2d5907"></script>
  <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
  <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
  
  

  Kevin
• jtr1812 Posts: 11Questions: 4Answers: 0

  August 2020

  That was it. I can't thank you enough for your help here. I was struggling trying to figure out what was wrong and I didn't realize the order of includes did matter. Anyway, thanks again as I was able to enable/disable my custom button now. Much appreciated.