deleting row with column_def server-side processing

deleting row with column_def server-side processing

chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
edited September 2018 in Free community support

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)

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 5,543Questions: 19Answers: 1,233
    Answer ✓

    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

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited September 2018

    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()

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1

    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.

  • kthorngrenkthorngren Posts: 5,543Questions: 19Answers: 1,233

    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

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited September 2018

    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...

  • kthorngrenkthorngren Posts: 5,543Questions: 19Answers: 1,233
    edited September 2018

    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

  • chessGuru64chessGuru64 Posts: 79Questions: 18Answers: 1
    edited September 2018

    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);
        ?>
    
Sign In or Register to comment.