How to update a server side datatable on change a checkbox from outside of datatable

Question

I am using data table with Grails. I have a check box outside the data table and on its event I want to load the table again with the check box value. Here are my attempts below :

In my view where the check box is >>

<g:checkBox id="wrapCheck" name="wrapCheck"/> Wrapped

Here is my attempts in view where I am calling server method >>

$('#wrapCheck').on('click', function (e) {
    setWrapActiveStatus();
    var referenceId = $('#callForWrap').val();
    jQuery.ajax({
        type: 'POST',
        dataType: 'JSON',
        url: "${g.createLink(controller: 'androidGame',action: 'ajaxAndroidGameList')}?wrapCheck=" + referenceId,
        %{--url: "${g.createLink(controller: 'androidGame',action: 'ajaxListByWrapActiveStatus')}?wrapCheck=" + referenceId,--}%
        success: function (data, textStatus) {
            if (data.isError == false) {
                $('#example').DataTable().ajax.reload();
            } else {
                alert(data.message);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        }
    });
});

here is my setWrapActiveStatus() function >>

function setWrapActiveStatus(){
    if($("#wrapCheck").prop('checked') == true){
        $('#callForWrap').val("1");
    }else{
        $('#callForWrap').val("");
    }
}

And here is my Controller Action >>

def ajaxAndroidGameList() {
    LinkedHashMap gridData
    String result
    LinkedHashMap resultMap = androidGameService.androidGamePaginateList(params)
    if(params.wrapCheck == "1"){
        resultMap = androidGameService.androidGamePaginateListByWrapStatus(params)
    }

    // LinkedHashMap resultMap = androidGameService.androidGamePaginateList(params)

    if(!resultMap || resultMap.totalCount== 0){
        gridData = [iTotalRecords: 0, iTotalDisplayRecords: 0, aaData: []]
        result = gridData as JSON
        render result
        return
    }
    int totalCount = resultMap.totalCount
    gridData = [iTotalRecords: totalCount, iTotalDisplayRecords: totalCount, aaData: resultMap.results]
    result = gridData as JSON
    render result
}

My action is response well only wrapped list but data table does not update.

EDIT - Data table Initialization

$('#example').dataTable({
                "sPaginationType": "full_numbers",
                "bAutoWidth": true,
                "bServerSide": true,
                "iDisplayLength": 10,
                "deferLoading": ${totalCount?:0},
                "sAjaxSource": "${g.createLink(controller: 'androidGame',action: 'ajaxAndroidGameList')}",
                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    if (aData.DT_RowId == undefined) {
                        return true;
                    }
                    $('td:eq(4)', nRow).html(getStatusIcon(nRow, aData[4])).css({textAlign: 'center'});
                    $('td:eq(5)', nRow).html(getStatusIcon(nRow, aData[5])).css({textAlign: 'center'});
                    $('td:eq(6)', nRow).html(getActionBtn(nRow, aData)).css({textAlign: 'center'});
                    return nRow;
                },
                "aoColumns": [
                    null,
                    { "bSortable": false },
                    { "bSortable": false },
                    { "bSortable": false },
                    { "bSortable": false },
                    { "bSortable": false },
                    { "bSortable": false }
                ]
            });

Answer 1

In your DataTables initialization code you need to use option fnServerParams to modify data sent to the server.

I have also corrected deferLoading which should be iDeferLoading, see iDeferLoading.

Below is modified DataTables initalization code:

$('#example').dataTable({
    "sPaginationType": "full_numbers",
    "bAutoWidth": true,
    "bServerSide": true,
    "iDisplayLength": 10,
    "iDeferLoading": ${totalCount?:0},
    "sAjaxSource": "${g.createLink(controller: 'androidGame',action: 'ajaxAndroidGameList')}",
    "fnServerParams": function (aoData){
       aoData.push({ 
          "name": "wrapCheck", 
          "value": $("#wrapCheck").prop('checked') ? "1" : "" 
       });
    },
    "fnRowCallback": function (nRow, aData, iDisplayIndex) {
        if (aData.DT_RowId == undefined) {
            return true;
        }
        $('td:eq(4)', nRow).html(getStatusIcon(nRow, aData[4])).css({textAlign: 'center'});
        $('td:eq(5)', nRow).html(getStatusIcon(nRow, aData[5])).css({textAlign: 'center'});
        $('td:eq(6)', nRow).html(getActionBtn(nRow, aData)).css({textAlign: 'center'});
        return nRow;
    },
    "aoColumns": [
        null,
        { "bSortable": false },
        { "bSortable": false },
        { "bSortable": false },
        { "bSortable": false },
        { "bSortable": false },
        { "bSortable": false }
    ]
});

Then for checkbox click event handler all you need to do is:

DataTables 1.10

$('#wrapCheck').on('click', function (e) {
    $('#example').DataTable().ajax.reload();
});

DataTables 1.9

$('#wrapCheck').on('click', function (e) {
    $('#example').dataTable().fnDraw();
});

NOTE:

Please note, that your DataTables initialization code and server-side code are using older naming conventions for DataTables 1.9. DataTables 1.10 is backward compatible, meaning that it supports both new and old naming conventions. But with the release of new versions, the compatibility may be dropped, and you may want to consider updating your code according to 1.9 to 1.10 upgrade guide and Converting 1.9 naming to 1.10.