Удаление нескольких строк таблицы с помощью Jquery и Ajax

Question

Я хочу иметь возможность удалять выбранные флажками строки, но когда я нажимаю «Удалить выбранное», и таблица на веб-странице, и база данных MySQL остаются неизменными.Как получить выбранные строки как из веб-страницы, так и из базы данных, которые нужно удалить?

Редактировать: теперь я могу удалить строки, но только первую строку, несмотря на то, что выбрано более одного флажка или установлен другой флажок не в первом ряду.Кроме того, если я хочу удалить еще одну запись, мне придется сначала обновить страницу, а затем удалить другую.

datatable.php

<code><div class="row well">
    <a type="button" class="delete_all btn btn-primary pull-right">Delete Selected</a>
</div>

<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) +'

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

ajax.php

//--->Delete row entry  > start
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();
}    
}
//--->Delete row entry  > end

Я видел другие подобные вопросы, такие как этот но я неНе думаю, что это применимо к моему коду.

Мой вывод:

Answer 1

Чтобы достичь того, что вы хотите, вы должны правильно выбрать хорошие элементы.Например, HTML id должен быть уникальным, поэтому присвоение всем вашим элементам одинакового id="row" не будет работать.Использование вашего класса будет достаточно.Затем вы должны учитывать, что each будет выполнять функцию отдельно для всех выбранных вами элементов, поэтому, если вы хотите выполнить какие-то действия для каждого элемента, весь код должен быть внутри.

Я немного оптимизировал вашкод, избавившись от переменной allVals; если его единственная цель - проверить, были ли выбраны строки, вы можете напрямую проверить .length по своему выбору.Я переименовал переменные, чтобы было более понятно, что к чему.

Также не очень ясно в вопросе, должен ли текст «Пожалуйста, подождите ... удаление вашей записи» появляться в кнопке или в каждой строке,я предположил, что это было в кнопке, и это поможет вам отличить все элементы от того, как они выделены.

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

    //'click' is called on the button, so 'this' here will be the button
    var button = $(this) ;

    var checked_checkboxes = $(".sub_chk:checked");

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

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

        //next code will be executed for each checkbox selected:
        checked_checkboxes.each(function(){
            var checkbox = $(this);
            var row_id = checkbox.attr('row_id');
            var data_obj=
            {
                call_type: 'delete_row_entry',
                row_id: row_id,
            };

            $.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) +'

'+' ';// вы все равно должны что-то сделать со своим сообщением, имея в виду, что для каждого отдельного $ .post будет сгенерировано отдельное сообщение (по одному для каждого отмеченного флажка)} else if (d1.status == "success"){checkbox.closest ('tr'). css ('background', 'red'). slideUp ('slow');}});});}});