Answers

• allan Posts: 63,175Questions: 1Answers: 10,409 Site admin

  September 2016

  Don't use columns.data as a function. Its strongly recommend against doing that (to the point where i'm going to remove it from the documentation in future).

  Use a renderer to dynamically create data. Responsive should work automatically with that. if it doesn't, please link to a test case showing the issue.

  Allan
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016 edited September 2016

  I'm going to post my whole code to show how im getting my data as im slightly confused by the link you posted, it seems to say to do the same as what i am doing..

  (REMOVED UNNECESSARY CODE)
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  Oh, i see.. this is wrong!

  { 'data': function ( row, type, val, meta ) {
                          return "<a class='btn btn-default edit' href='index.php?page=editbatch&batchid=" + row.batch_id +"'>Edit</a><button class='btn btn-default delete' type='button'>Delete</a>";
                      }
  
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  Ok I've fixed that to use:

   { 'data': null,
      "render": function ( row, type, val, meta ) {   
      return "<a class='btn btn-default edit' href='index.php?page=editbatch&batchid=" + row.batch_id +"'>Edit</a><button class='btn btn-default delete' type='button'>Delete</a>";
          },
    }
  

  The reason why the responsive isnt working is because my code looks for the closest TD for the data, in responsive the data is in a <span>..

  Is there a way to call the data without relying on a container?
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  I apologise for not being clear on this..

  I am trying to get the value in the ID column to use in an ajax call.

   var deleteBatchId = table.cell( $(this).closest('tr'), 0 ).data(  );
  
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  This works fine.. But not in responsive, data is not defined..

   // Delete Recipe from the DataTable
  $('#datatable').on( 'click', 'button.delete', function (e) {
      var user = '<?php echo $_SESSION['username']; ?>';
      var table = $('#datatable').DataTable();
      var data = table.row( $(this).parents('tr') ).data( );
      var deleteBatchId = data.batch_id;
  
      //var row = $(this).closest("tr"), $tds = $row.find("td:nth-child(1)");
  
      //$.each($tds, function() {
          //var deleteBatchId = $(this).text(); 
      //deleteBatchId = 
  
  
      var token = '<?php echo json_encode($token); ?>';
  
  
      var answer = confirm("Are you sure you want to delete this Batch with id=" + deleteBatchId + "?");
      if (answer) {
          $.ajax({
          type: "POST",
          url: "controllers/batchControl.php",
          data: { deleteBatchId: deleteBatchId, user: user, token: token },
          success: function(data){
              $row.remove();
              //document.location.reload(true);
              //$('.success_container').fadeIn().delay(2000);
              //$('.success_container').fadeOut().delay(2000);
          },
          });
  
      return false;
      }
      });
  //});
  
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  This code works to get the id in desktop mode but not in responsive.

      var table = $('#datatable').DataTable();
      var row = $(this).closest('tr');
      var deleteBatchId = table.row(row).data().batch_id;
  

  I get the error message:

   TypeError: table.row(...).data(...) is undefined
    var deleteBatchId = table.row(row).data().batch_id;
  
• allan Posts: 63,175Questions: 1Answers: 10,409 Site admin

  September 2016

  If you could link to a page showing the issue I'd be happy to take a look and try to understand why that isn't working.

  Allan
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  It is behind a log in system, can i add you as a user and pm you the details?
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  Pm'd you details, thanks Allan really appreciate your time!
• allan Posts: 63,175Questions: 1Answers: 10,409 Site admin

  September 2016 Answer ✓

  Thanks, So the problem is:

  var row = $(this).closest('tr');
  var deleteBatchId = table.row(row).data().batch_id;
  

  But in the responsive view the closest tr is the child row container - so row() doesn't select the master row.

  Perhaps the easiest way to do it is to check if you are in a responsive view and alter the way you get the data accordingly.

  var rowSelector;
  var li = $(this).closest('li');
  
  if ( li.length ) {
   rowSelector = table.cell( li ).index().row;
  }
  else {
    rowSelector =  $(this).closest('tr');
  }
  
  
  var data = table.row( rowSelector ).data();
  

  There is probably a better way - I'm fairly sure there is, but after 6 hours of support questions today I'm fried :-)

  Allan
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016

  This looks like the exact thing i need, i tried to find how to check if i was in responsive view but no luck..

  There is probably a better way - I'm fairly sure there is, but after 6 hours of support questions today I'm fried :-)

  You have the patience of a saint! Thanks for your time today, i really appreciate it, we shall re-visit this next week i think as i have spent most of my day trying to work out why my site doesnt refresh on my mobile, turns out its my hosts cache plugin

  Have a good weekend
• WebCodex Posts: 71Questions: 13Answers: 3

  September 2016 edited September 2016

  Your a Legend!! Thankyou!!!

  The following works in both views!

  NOTE: As my id column was hidden i had to add .data().batch_id to table.row()

  $('#datatable').on( 'click', 'button.delete', function (e) {
      var user = '<?php echo $_SESSION['username']; ?>';
      var table = $('#datatable').DataTable();
  
      var rowSelector;
      var li = $(this).closest('li');
  
      if ( li.length ) {
       rowSelector = table.cell( li ).index().row;
      }
      else {
        rowSelector =  $(this).closest('tr');
      }
  
  
      var deleteBatchId = table.row( rowSelector ).data().batch_id;
  
      var token = '<?php echo json_encode($token); ?>';
  
  
      var answer = confirm("Are you sure you want to delete this Batch with id=" + deleteBatchId + "?");
      if (answer) {
          $.ajax({
          type: "POST",
          url: "controllers/batchControl.php",
          data: { deleteBatchId: deleteBatchId, user: user, token: token },
          success: function(data){
              //row.remove();
          },
          });
  
      return false;
      }
      });