Two DataTables on the same page doesn't work

kieronapple

I have this function

function getValidTags(type){
var ruleID = $('.ruleID').val();

switch(type){
    case "validTags":
      var table = $('.valid-tags').DataTable({
          "ajax": {
              "url": "/ajax/getValidTags.php",
              "type": "POST",
              "data": {
                ruleID: ruleID,
                type: type
              },
          },
          "columnDefs": [{
             "targets": 2,
             "render": function(data, type, full, meta){
                        return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>';          
             }
          }],
          destroy: true     
      });
    break;

    case "autofixes":
    alert('hi');
      var table2 = $('.autofixes-table').DataTable({
          "ajax": {
              "url": "/ajax/getValidTags.php",
              "type": "POST",
              "data": {
                ruleID: ruleID,
                type: type
              },
          },
          "columnDefs": [{
             "targets": 2,
             "render": function(data, type, full, meta){
                        return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button>';          
             }
          }],
          destroy: true     
      });
    break;
}

}

The autofixes part doesn't initialise or send the AJAX request?

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

kieronapple

Hi @allan I have created a CodePen, as you can see the functionality initialises properly, the first modal would get the AJAX data fine, but the second modal the AJAX isn't being ran? http://codepen.io/kieronapple/pen/WwzrgP

allan

Your HTML for the second table defines 2 columns, but your columnDefs defines 3 (targets: 2 - it is zero indexed). So a Javascritp error is occuring if you have a look at your console.

The two need to match.

Allan

kieronapple

@allan Awesome, never knew it was zero indexed.