How to delete multiple rows of a table with Jquery and ajax?


#1

I want to be able to delete checkbox-selected rows but when I click on “Delete Selected”, I have the following limitations:

  1. Can only delete the first row no matter which checkbox I tick

  2. Deletion only take place the first time or if I refresh the page.

I want to be able to delete selected rows, and delete them whenever I please without having to refresh the page.

I have 2 pieces of code:

datatable.php

<a type="button" class="delete_all btn">Delete Selected</a>

<script type="text/javascript">

$(document).ready(function($)
{
function create_html_table (tbl_data) {

tbl +='<table>';
tbl +='<thead>';
tbl +='<tr>';

tbl +='<th rowspan="3"><input type="checkbox" id="master"></th>';
// More table headers
tbl +='</tr>';
tbl +='</thead>';

tbl +='<tbody>';

          $.each(tbl_data, function(index, val) 
            {   
                var row_id = val['row_id'];

                //loop through ajax row data
                tbl +='<tr id="row" row_id="'+row_id+'">';

                    tbl +='<td><input type="checkbox" class="sub_chk"></td>';
                    tbl +='<td>'+(index + 1)+'</td>';
                    tbl +='<td><div col_name="filename">'+val['filename']+'</div></td>';
                    // More data
                tbl +='</tr>';
             });

tbl +='</tbody>';
tbl +='</table>';
}

var ajax_url = "<?php echo APPURL;?>/ajax.php" ;

// Multi-select
$(document).on("click","#master", function(e) {

if($(this).is(':checked',true))  
{
    $(".sub_chk").prop('checked', true);  
}  
else  
{  
    $(".sub_chk").prop('checked',false);  
}  
});

//Delete selected rows
$(document).on('click', '.delete_all', function(event) 
{
    event.preventDefault();

    var ele_this = $('#row') ;
    var row_id = ele_this.attr('row_id');

    var allVals = [];
    $(".sub_chk:checked").each(function()
    {    
    allVals.push(row_id);
    });

    if(allVals.length <=0)  
    {  
        alert("Please select row.");  
    }

    else {

    var data_obj=
    {
        call_type:'delete_row_entry',
        row_id:row_id,
    };  

    ele_this.html('<p class="bg-warning">Please wait....deleting your entry</p>')

    $.post(ajax_url, data_obj, function(data) 
    { 
        var d1 = JSON.parse(data); 
        if(d1.status == "error")
        {
            var msg = ''
            + '<h3>There was an error while trying to add your entry</h3>'
            +'<pre class="bg-danger">'+JSON.stringify(data_obj, null, 2) +'</pre>'
            +'';

        }
        else if(d1.status == "success")
        {
            ele_this.closest('tr').css('background','red').slideUp('slow');              
        }
    });

    }   

});

});

</script>

ajax.php

if(isset($_POST['call_type']) && $_POST['call_type'] =="delete_row_entry")
{   

$row_id = app_db()->CleanDBData($_POST['row_id']);   

$q1 = app_db()->select("select * from data where row_id='$row_id'");
if($q1 > 0) 
{
    //found a row to be deleted
    $strTableName = "data";

    $array_where = array('row_id' => $row_id);

    //Call it like this:
    app_db()->Delete($strTableName,$array_where);

    echo json_encode(array(
        'status' => 'success', 
        'msg' => 'deleted entry', 
    ));
    die();
}    
}

#2

But that is contradictory to your limitations …

Other than that, what is the issue you have?


#3

Am I correct in interpreting “limitations” not as “what can be done” but as “what is currently happening and not desired”?


#4

I’m not going to fix and/or verify every piece of your code. However, I did take a quick glance and immediately noticed that line which will be a JavaScript error. I highly doubt that is the only issue but it might be a start. Most browsers have dev tools that can be used to spot these errors easily. For example, chrome has dev tools console window that displays errors, notices, and warnings. You can use those tools to debug the code.