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中包含了数据表的文件，该文件位于views

中的布局文件夹下

在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: [.........])
}

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

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

1 个答案: