如何在从数据表外部更改复选框时更新服务器端数据表

Question

我在 Grails 中使用数据 table。我在数据 table 之外有一个复选框，在它的事件中我想用复选框值再次加载 table 。以下是我的尝试：

在我看来复选框是>>

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

这是我在视图中调用服务器方法的尝试 >>

$('#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) {
        }
    });
});

这是我的 setWrapActiveStatus() 函数 >>

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

这是我的控制器操作 >>

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
}

我的操作是仅响应包装列表但数据 table 不更新。

编辑-数据table初始化

$('#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

在您的 DataTables 初始化代码中，您需要使用选项 fnServerParams 来修改发送到服务器的数据。

我也更正了deferLoading，应该是iDeferLoading，见iDeferLoading。

下面是修改后的DataTables初始化代码：

$('#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 }
    ]
});

然后对于复选框单击事件处理程序，您需要做的就是：

DataTables 1.10

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

DataTables 1.9

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

注意：

请注意，您的 DataTables 初始化代码和服务器端代码使用的是 DataTables 1.9 的旧命名约定。 DataTables 1.10 是向后兼容的，这意味着它支持新旧命名约定。但是随着新版本的发布，兼容性可能会下降，你可能要考虑根据1.9 to 1.10 upgrade guide and Converting 1.9 naming to 1.10.

更新你的代码

如何在从数据表外部更改复选框时更新服务器端数据表

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

grails

datatables

datatables-1.10

grails-2.4