Trying To Delete Row From DataTable From Confirmation Modal

murday1983

I have a DataTable with delete buttons (are theres more than one row but i'm sturggling to delete the row when its confirmed.

User clicks the delete button in the table and a confirmation modal is displayed which has all the selected row's data in it but this is where i'm struggling, when i click yes, my modal closes and i need the DataTable to update with the row removed. This is the bit i cant get my head around as i am new to DataTables. I have tried looking at other posts and documents on the site but cant get it to work.

Below is all my code from generating my DataTable to clicking the 'Yes' on the modal

var existingRuleTable;

// Load 'Existing Rules' section datatable
var addModifyDeleteButtonClick = function () {
    // Existing rule datatable creator
    existingRuleTable = $('#existingRulesDataTable')
        .DataTable({
                'ajax': {
                    "type": 'GET',
                    //"url": '/ajax/TODR/Rule/list/' + telNumberSelected,
                    "url": 'js/dataTable.json',
                    "data": function (data) {
                        return data;
                    },
                    "dataSrc": function (res) {
                        existingRuleTableCount = res.data.length;
                        return res.data;
                    },
                    "error": function () {
                        $('#existingRulesDataTable_wrapper').hide();
                        $('#existingRuleLoadErrorMessage').html(
                            '<p>There was an issue retrieving the existing rules for <b>' + strippedTelNo + '</b>. Please try again.</p>' +
                            '<p>If the error keeps occurring, please get in touch.</p>').addClass('text-danger');
                    }
                },
                "columns": [{
                        "data": "position"
                    },
                    {
                        "data": "startTime"
                    },
                    {
                        "data": "endTime"
                    },
                    {
                        "data": "selectedDays"
                    },
                    {
                        "data": "selectedDates"
                    },
                    {
                        "data": "selectedMonths"
                    },
                    {
                        "data": null,
                        "render": function (data) {
                            if (data.timeRange == '-w') {
                                return data.timeRange = 'Working hours'
                            } else {
                                return data.timeRange = 'Out of office hours'
                            }
                        }
                    },
                    {
                        "data": null,
                        "render": function (data) {
                            if (buttonclicked == 'Modify') { // Displays the radio button when 'Mod' clicked
                                return '<label class="c-radio" style="margin-bottom: 0px">' +
                                    '<input type="radio" name="existingRuleActionRadioButton" value="option1">' +
                                    '<span class="fa fa-check"></span>' +
                                    '</label>';
                            } else if (buttonclicked == 'Delete') { // Displays the delete button when 'Del' clicked
                                return '<button name="deleteRuleButton" class="btn btn-danger">' +
                                    '<i class="fa fa-trash-o" style="font-size: large"></i>' +
                                    '</button>';
                            } else {
                                return ''; // Needed for the 'Add' button click
                            }
                        }
                    },
                    ],
                    "destroy": true
                });

// Delete rule button click to show modal and pass row data
$('#existingRulesDataTable').on('click', 'tbody .btn-danger', function () {
    deleteRecordData = existingRuleTable.row($(this).closest('tr')).data();

    $("#deleteModal").modal('show');
});

// Yes button click to confirm deletion of existing rule
$('#yesButton').click(function (e) {
    e.preventDefault();
    var startTime = '';
    var endTime = '';
    var timeRange = '';
    var timeType = '';

    if ($('td[name=modalStartTime]').html() == 'All day') {
        startTime = 'Anytime';
        endTime = 'Anytime';
        timeType = 'anyTime';
    } else {
        startTime = $('td[name=modalStartTime]').html();
        endTime = $('td[name=modalEndTime]').html();
        timeType = 'specificTime';
    }

    if ($('td[name=modalGoTo]').html() == 'Working hours') {
        timeRange = '-w';
    } else if ($('td[name=modalGoTo]').html() == 'Out of office hours') {
        timeRange = '-oo';
    }

    var data = {
        dialplannum: telNumberSelected,
        timeType: timeType,
        startTimeHr: '',
        startTimeMin: '',
        endTimeHr: '',
        endTimeMin: '',
        position: $('td[name=modalOrderNumber]').html(),
        startTime: startTime,
        endTime: endTime,
        timeRange: $('td[name=modalOrderNumber]').html(),
        selectedDays: $('td[name=modalWeekDays]').html(),
        selectedMonths: $('td[name=modalMonths]').html(),
        selectedDates: $('td[name=modalMonthDays]').html(),
        timeRange: timeRange,
    }

    $.ajax({
         url: "/incomingcalls.php?action=split&amp;type=active",
         type: "post",
         dataType: "json",
         data: JSON.stringify(data),
         contentType: "application/json",
         cache: false,
         async: false,
         success: function(data) {
                //$('#existingRulesDataTable').DataTable().destroy();
         },
         error: function () {
             $('#errorModal').modal('show');
             $('#existingRuleError').html(
                 '<p>There was an issue submitting the data. Please try again.</p>' +
                 '<p>If the error keeps occurring, please get in touch.</p>');
             $('#errorModal').on('shown.bs.modal', function () {
                 $('#errorModalCloseButton').focus();
             })
         }
     });
});

The code needs to go in my $('#yesButton').click(function (e) function

colin

Hi @murday1983 ,

I'm assuming you're not using Editor. If so, and the row is being removed as you say, then it should just need a draw(). If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin