1

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

列表.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: [.........])
}
4

1 回答 1

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" />
于 2013-08-13T11:32:51.383 回答