如何在grails的ajax响应中更新dataTable答案

【问题标题】：How to update dataTable in ajax response in grails如何在grails的ajax响应中更新dataTable
【发布时间】：2013-08-13 10:45:29
【问题描述】：

我有一个带有使用 Jquery 数据表的表的模板。在整个页面刷新中，我正确地获得了数据表设计。但是当我用 ajax 更新表时，我无法获得设计的数据表。它呈现没有设计的普通桌子。我做错了什么。

list.gsp：

<div id="lists">
    <g:render template="template1"></g:render>
</div>

<g:formRemote name="saveParameter" url="[action:'save']" update="lists">

</g:formRemote>

_template1.gsp

<table class="gs"> //This is a data table

</table>

我在 main.gsp 中包含了数据表文件，该文件位于视图的布局文件夹下

在 main.gsp 中：

<link rel="stylesheet"
    href="${resource(dir: 'css', file: 'jquery-ui-1.10.3.custom.css')}" />

<link rel="stylesheet"
    href="${resource(dir: 'css', file: 'jquery.dataTables_themeroller.css')}"
    type="text/css" />

<g:javascript library='jquery' />
<r:layoutResources />
<g:javascript src="jquery-ui-1.10.3.custom.js" />
<g:javascript library="datatables" src="jquery.dataTables.js" />
<g:javascript src="dataTable.js" />

在 dataTable.js 中

$(document).ready(function() {

$('.gs').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "aoColumnDefs" : [ {
            "bSortable" : false,
            "aTargets" : [ "no-sort" ]
        },{ sWidth: '20px', aTargets: [ '_all' ] }]
});

$('#DataTables_Table_0_wrapper').css('padding-right','15px');

});

在控制器保存动作中，

def save(Integer max) {
      .......
      render (template:"template1", model: [.........])
}

【问题讨论】：

您正在从您的操作中呈现列表模板，但列表是您发布的视图。或者 _list 是另一个 gsp？
ya.here 我更改了 template1 以减少混淆。在我的代码中，我有 _list 作为模板。

标签： jquery ajax grails gsp

【解决方案1】：

我没用过jquery.dataTables.js，所以对这个不太熟悉。但正如您的代码所说：您将 _template1.gsp 作为 ajax 响应发送。因为 document.ready 已经被执行，因此在 ajax 响应中 dataTable 属性未应用。

要解决此问题，请在 _template1.gsp 中添加以下代码

<script type="text/javascript">
    $(document).ready(function() {
        $('.gs').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumnDefs" : [ {
                "bSortable" : false,
                "aTargets" : [ "no-sort" ]
            },{ sWidth: '20px', aTargets: [ '_all' ] }]
        });

        $('#DataTables_Table_0_wrapper').css('padding-right','15px');
});
</script> 
<table class="gs"> //This is a data table
    ....
</table>

或

<g:javascript src="dataTable.js" />

【讨论】：

第二个选项我不确定，如果可行，请通知我。谢谢..,.
非常感谢。那就是问题所在。函数 createDataTable() { } $(document).ready(function() { createDataTable(); });我更改了 datatable.js。我已经在 onComplete 中调用了该函数。