How to delete multiple rows by selecting the checkboxes of a column

Honeydew

i want to delete selected rows from the datatable

<script>
    $(document).ready(function () {
        $.ajax({
            "url": "Handlers/jQueryDatatableHandler.ashx",
            "data": { Operation: 'GetMessages', searchText: '' },
            success: function (data) {
                json = JSON.parse(data);
                columns = [];
                // build column titles
                for (var i = 0; i < json.colnames.length; i++) {
                    columns.push({ title: json.colnames[i] });
                }

                var table = $('#example').DataTable({
                    "responsive": true,
                    "processing": true, 
                    "serverSide": false, 
                    "order": [[4, 'desc']],
                    data: json.rows,
                    columns: columns,
                    columnDefs: [
                        {
                            targets: 0,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                            },
                            className: "dt-body-center",
                            "orderable": false,
                            "searchable": false
                        },
                        {
                            targets: 1,
                            visible: false
                        },
                        {
                            targets: -1,
                            visible: false
                        }
                    ],
                    "lengthMenu": [2, 4, 8]
                });
            }
        });


        $('#example').on('click', 'tbody tr', function () {
         //do something   
        });
    });

    $('.editor-active').click(function () {          
        var table = $('#example').DataTable();
        var row = table.row($(this)).data();
        console.log(row);             
    });

    var buildstring = [];
    function BuildDeleteString(elem, id) {
        if ($(elem).is(':checked')) {
            if (buildstring.indexOf(id) == -1) {
                buildstring.push(id);
            }
        }
        else {
            var idx = buildstring.indexOf(id);
            if (idx != -1) {
                buildstring.splice(idx, 1);
            }
        }
    };

</script>

My first column is a checkbox column. I am doing something on row click and when I select the checkbox it fires the rowclick event and not the checkbox event.

I want to exclude the first column from the row click, how can i do that?

I want to call the 'BuildDeleteString' function whenever a checkbox is selected or unselected to store selected EmployeeId's so that on delete button click I can delete all the ids from the database.

Also I want to delete all the selected rows from the database and rebind the datatable, can you provide some example for this?

kthorngren

I want to exclude the first column from the row click, how can i do that?

There are probably other ways to do this but I would change your selector then get the row in the event function:

  $('#example').on('click', 'tbody td:not(:first-child)', function () {
    var row = this.closest('tr');     //get the clicked row
  });

delete all the selected rows from the database and rebind the datatable

Option 1:
Create a function that performs the ajax call then uses clear() followed by rows.add() and draw(). This will clear the table then add the new rows from the ajax response.

Option 2:
Place your initial ajax call in a function. Call that function when the page loads. When the rows are delete then use destroy() to destroy the Datatables instance then call the function with the ajax call.

Option 1 is probably preferable but you can experiment to see which works better for you.

Kevin

Honeydew

Thanks Kevin but this does not solve my whole problem.
Instead of $('#example').on('click', 'tbody tr', function () {
I have written your line like this:
$('#example').on('click', 'tbody td:not(:first-child)', function () {
var table = $('#example').DataTable();
var row = table.row(this.closest('tr')).data();
alert("EmployeeId: " + row[1]); //EmployeeId
});

This solve my first query and I can redirect the user if a row is clicked but not checkbox is clicked.

Now if a checkbox is clicked I want to put the EmployeeId value in an array; so when delete button is clicked it will delete all those records whose id is stored in array from the database and reload the datatable.

Please suggest how can I add the checkbox event?

kthorngren

Currently you are using standard checkboxes and can use something like the below to run an event each time the checkbox is clicked:

    $('input.editor-active').on('change', function () {
        cb = $(this).prop('checked');
        console.log(cb)
    });

Within that event you could add or remove from the array if the checkbox is checked or not.

If you are using the checkbox column just for row selection it might be easier to use the Select extension. Some exmaples are here including how to use the API to get the selected rows:
https://datatables.net/extensions/select/examples/

Kevin

Honeydew

The event you suggested does not work.

kthorngren

See the answer in your other thread:
https://datatables.net/forums/discussion/52956/row-click-and-checkbox-click-event-not-working#latest

Kevin