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 に答える