Server Side Processing table.empty() broken inline buttons

Davey Jones

I have a search form that will then populate a datatable. There are often a lot of records returned depending on the search criteria, and so I implemented server side processing. My search form has a clear button, and when it clears I am clearing the results datatable as well. I know that clearing the table doesn't work like it would if It was client side processing, but I also didn't want to make a request to the server just to clear the table. I ended up with doing a table.empty() and then reinstantiating the datatable. However, with my search results I am also rendering a button so the user can view the record on another page. These buttons stop working when I do table.empty()

Here is the initial load of the datatable on search:

$('#tblSearch').DataTable({
        destroy: true,
        processing: true,
        serverSide: true,
        stateSave: true,
        searching: false,
        pageLength: 25,
        ajax: {
            type: 'POST',
            url: url,
            data: searchParameters,
            error: function (xhr, status, error) {
                // handle error
            }
        },
        columns: [
            {
                targets: 0,
                data: 'Column1',
                searchable: false,
                orderable: false,
                render: function (data, type, full, meta) {
                    var uniqueId = full.SomeVar1+ full.SomeVar2+ full.SomeVar3;

                    return '<button type="button" id="' + uniqueId + '" class="btn btn-primary view-inspection" title="View Inspection">View</button>';
                },
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).prop("scope", "row");
                }
            },
            {
                targets: 1,
                data: 'Column2'
            },
            {
                targets: 2,
                data: 'Column3'
            },
            {
                targets: 3,
                data: 'Column4'
            },
            {
                targets: 4,
                data: 'Column5'
            },
            {
                targets: 5,
                data: 'Column6'
            },
            {
                targets: 6,
                data: 'Column7',
                className: 'dt-center',
                render: function (data, type, full, meta) {
                    if (data) {
                        return '<input type="checkbox" disabled checked>';
                    }
                    else {
                        return '<input type="checkbox" disabled>';
                    }
                },
            },
            {
                targets: 7,
                data: 'Column8'
            },
            {
                targets: 8,
                data: 'Column9'
            },
            {
                targets: 9,
                data: 'Column10'
            }
        ].
        order: []
    });

And here is what is run when clearing:

$('#tblSearch').empty().DataTable({
        destroy: true,
        searching: false,
        pageLength: 25,
        columns: [
            {
                targets: 0,
                orderable: false,
                width: '6%'
            },
            { targets: 1 },
            { targets: 2 },
            { targets: 3 },
            { targets: 4 },
            { targets: 5 },
            { targets: 6 },
            { targets: 7 },
            { targets: 8 },
            { targets: 9 }
        ],
        order: []
    });

When doing the initial search, the view buttons work fine. Even if I change the criteria in the form and search again the view buttons still work. It's the table.empty() and then searching again that causes them to not work.

Here is how I am attaching the button click event:

$('#tblSearch tbody').on('click', 'button[type="button"]', function () {
    // do some stuff
});

It seems to me that it's a DOM issue after I run table.empty(), but I'm not quite sure.

Davey Jones

Instead of doing table.empty() I am passing in an empty array into the data field instead.

Old method (broken):

$('#tblSearch').empty().DataTable({
        destroy: true,
        searching: false,
        pageLength: 25,
        columns: [
            {
                targets: 0,
                orderable: false,
                width: '6%'
            },
            { targets: 1 },
            { targets: 2 },
            { targets: 3 },
            { targets: 4 },
            { targets: 5 },
            { targets: 6 },
            { targets: 7 },
            { targets: 8 },
            { targets: 9 }
        ],
        order: []
    });

New method

$('#tblSearch').DataTable({
        destroy: true,
        searching: false,
        pageLength: 25,
        data: [],
        columns: [
            {
                targets: 0,
                orderable: false,
                width: '6%'
            },
            { targets: 1 },
            { targets: 2 },
            { targets: 3 },
            { targets: 4 },
            { targets: 5 },
            { targets: 6 },
            { targets: 7 },
            { targets: 8 },
            { targets: 9 }
        ],
        order: []
    });

allan

Could you have the server return an empty result set when a request is made with an empty search string? That would make the client-side aspect easier.

Allan