deleting row with column_def server-side processing

chessGuru64

Without using datatables.net, one would do a server-side table like this:

        while ($row = mysqli_fetch_array($records)) { ?>
        <tr>
        <td><?php echo $row['id']; ?> </td>
        <td><?php echo $row['first_name']; ?> </td>
        <td><?php echo $row['last_name']; ?> </td>
        <td><?php echo $row['position']; ?> </td>
        <td class="hidden-xs"><?php echo $row['date']; ?> </td>
        <td class="hidden-xs"><?php echo $row['updated']; ?> </td>
        <td>
        <a href="edit.php?edit=<?php echo $row['id']; ?>" name="edit" class="button green_btn"><span class="glyphicon glyphicon-pencil"> </a>
        <a href="index.php?del=<?php echo $row['id']; ?>" name="del" class="button del_btn" onclick="return confirm('Are you sure you want to delete this item?');"><span class="glyphicon glyphicon-trash"></span> </a>
        </td>

        </tr>
        <?php
        }
        ?>

This makes each row easy to delete/edit as you can simply use the $get method within the url to locate the row.

However, using datatables.net you have to do this to get the table:

                          columnDefs: [{
                            targets: -1,
                            defaultContent: '<button type="button" class="delete_btn" data-id="<?php echo "";?>">Delete</button>  <button type="button" class="edit_btn">Edit</button>'
                            }],
                            rowGroup: {
                            dataSrc: 1
                            }
                            });

EDIT: I will try again with this method but it seems like it does not loop each id individually?

And if you try to do an ajax json call like this:

                         $(function(){
                                $(document).on('click','.delete_btn',function (e) {
                                   e.stopPropagation();
                                var per_id=$(this).data('id');
                                var del_id= $(this).closest('tr');
                                var ele = $(this).parent().parent();  
                                console.log(del_id);

                                $.ajax({
                                    type:'POST',
                                    url:'delete.php',
                                    dataType: 'json', //This says I'm expecting a response that is json encoded.
                                    data: { 'del_id' : del_id}, 

                                    success: function(data){ //data is an json encoded array.

You get a infinite loop error as you cannot send the element without the value.

Do I have to use render? I am stumped.

Project Link if needed: https://databasetable-net.000webhostapp.com/test.php
(you may have to use internet explorer i need to change the url)

kthorngren

This is the same answer I gave in the other post you asked about this. Please don't duplicate posts:
https://datatables.net/forums/discussion/51901/selected-row-remove-function-is-not-working-if-i-assign-data-to-data-table-at-server-side#latest

If you want to add an ID to your buttons I think you would be better of using columns.render. Something like this example:
http://live.datatables.net/qemodapi/1/edit

Kevin

chessGuru64

Yeah sorry I realized after it would be better to start another discussion which is what I did.

Here is the full code solution for any other readers:

<script type="text/javascript"> 
        $(document).on('click','.delete_btn',function (){
    var id = $(this).attr("id").match(/\d+/)[0];
  var del_id = $('#example').DataTable().row( id ).data();
  var del_id = del_id[0];
  console.log(del_id[0]); 
        $.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            data: { 'del_id' : del_id}, 
            success: function(data){ 
              if(data['success']){  //You are checking for true/false not yes or no.
                console.log('You successfully deleted the row.');
              }else{
                console.log('The row was not deleted.');
                }
                }
        });
        });
</script>

Only thing I have to do now is get it to automatically refresh after a delete. It looks like that info is here: https://datatables.net/reference/api/ajax.reload()

chessGuru64

table.ajax.reload();

is not reloading the page. i used the exact same code from these two sources:
https://datatables.net/forums/discussion/51866
https://datatables.net/reference/api/ajax.reload()

document.location.reload(true);
did not work from this source: https://stackoverflow.com/questions/11180660/refresh-page-in-symfony2-at-the-end-of-ajax-call

$.ajax({
            type:'POST',
            url:'delete.php',
            dataType: 'json', //This says I'm expecting a response that is json encoded.
            cache: false,
            data: { 'del_id' : del_id}, 
            success: function(data){ 
              if(data['success']){  //You are checking for true/false not yes or no.
                //document.location.reload(true);
                table.ajax.reload();
                console.log('You successfully deleted the row.');
              }else{
                console.log('The row was not deleted.');
                }
                }
        });

the typical header("location: index.php"); within the php script also did not work. but this did not surprirse me because it is an ajax call.

this is probably a silly question.

kthorngren

table.ajax.reload();
is not reloading the page

Do you get errors in your browser's console?

Is the row removed from your table?

I'm guessing you see this message in your console:
'You successfully deleted the row.'

Did you verify that the table.ajax.reload(); is not sending an ajax request by monitoring the network traffic in your browser's developer tools?

Kevin

chessGuru64

Everything deletes. No refresh or errors.

the network says this:
200
POST
delete.php
databasetable-net.000webhostapp.com
xhr
html
528 B
580 B

I did notice that the console.log("row deleted") seems to be missing...

kthorngren

I did notice that the console.log("row deleted") seems to be missing...

If you aren't seeing either of the console.log outputs then I would wonder if the success function is running. Maybe put a console.log statement before the if to see if the success function is executing.

Kevin

chessGuru64

It looks like neither console.logs are triggering. Does that mean I have a ajax issue? I will copy paste my ajax code.

success: function(data){ 
                console.log("success function data reached");
              if(data['success']){  //You are checking for true/false not yes or no.
                //document.location.reload(true);
                table.ajax.reload();
                console.log('You successfully deleted the row.');
              }else{

delete.php ajax code:

    <?php
    session_start();
    $del_id = $_POST['del_id']; 
    $stmt = $conn->prepare("DELETE FROM employees WHERE id = ?"); 
    $stmt->bind_param('i', $del_id);
    $confirmDelete = $stmt->execute();
    //header("location: index.php");
    $array['success'] = FALSE; //Initialize the success parameter as false.
    if($confirmDelete){ //Check to see if there was an affected row.
      $array['success'] = TRUE;
    }

    echo json_encode($array);
    ?>