Responsive Link issues

WebCodex

I am using:
1.10.12/js/jquery.dataTables.min.js 1.10.12/js/dataTables.bootstrap.min.js 1.2.0/js/dataTables.select.min.js 3.3.7/js/bootstrap.min.js responsive/2.1.0/js/dataTables.responsive.min.js responsive/2.1.0/js/responsive.bootstrap.min.js

The problem i face:

When the DataTable is in desktop view i use the following code to render my delete / edit button:

 { '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>";
 }
}],

My delete function goes like this:

getID->aJaxCall->SecureController->class Function->RemoveRowFromDb and View.

The Ajax: (I've left in some other code ive tried as comments)

// Delete Recipe from the DataTable
$('#datatable').on( 'click', 'button.delete', function (e) {
    var user = '<?php echo $_SESSION['username']; ?>';
    var table = $('#datatable').DataTable();
    //var $row = $(this).closest("tr"), $tds = $row.find("td:nth-child(1)");
            var $row = $(this).closest("tr");

    /*$.each($tds, function() {
        var deleteBatchId = $(this).text(); */


    var deleteBatchId = table.cell( $(this).closest('tr'), 0 ).data(  );
    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;
    }
    //});
}); 

The above works fine in Desktop View but in Responsive view (Mobile) there are no TD's only Spans.

How can i get the data i require without relying on the data container.

Ideally i would like to be able to select any data for any given row to use inside of a function outside of the DataTable.

Thanks in advance

allan

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

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

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

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

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

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

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

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

It is behind a log in system, can i add you as a user and pm you the details?

WebCodex

Pm'd you details, thanks Allan really appreciate your time!

allan

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

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

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;
    }
    });