jquery - 如何在grails的ajax响应中更新dataTable

Question

我有一个带有使用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中的datatable文件包含在 View 中的布局文件夹下

在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');

});

在 Controller 保存操作中

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

Answer 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" />