2

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

在我看来复选框在哪里>>

<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
}

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

编辑 - 数据表初始化

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

1 回答 1

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 }
    ]
});

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

数据表 1.10

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

数据表 1.9

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

笔记：

请注意，您的 DataTables 初始化代码和服务器端代码使用 DataTables 1.9 的旧命名约定。DataTables 1.10 向后兼容，这意味着它同时支持新旧命名约定。但随着新版本的发布，兼容性可能会下降，您可能需要考虑根据1.9 到 1.10 升级指南和将 1.9 命名转换为 1.10 来更新您的代码。

于 2015-06-13T14:54:53.160 回答