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

i using data table grails. have check box outside data table , on event want load table again check box value. here attempts below :

in view check box >>

<g:checkbox id="wrapcheck" name="wrapcheck"/> wrapped 

here attempts in view 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 setwrapactivestatus() function >>

function setwrapactivestatus(){     if($("#wrapcheck").prop('checked') == true){         $('#callforwrap').val("1");     }else{         $('#callforwrap').val("");     } } 

and here 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 json         render result         return     }     int totalcount = resultmap.totalcount     griddata = [itotalrecords: totalcount, itotaldisplayrecords: totalcount, aadata: resultmap.results]     result = griddata json     render result } 

my action response wrapped list data table 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 }                 ]             }); 

in datatables initialization code need use option fnserverparams modify data sent server.

i have corrected deferloading should ideferloading, see ideferloading.

below 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 checkbox click event handler need 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, datatables initialization code , server-side code using older naming conventions datatables 1.9. datatables 1.10 backward compatible, meaning supports both new , old naming conventions. release of new versions, compatibility may dropped, , may want consider updating code according 1.9 1.10 upgrade guide , converting 1.9 naming 1.10.