Tuesday, 13 August 2013

How to update dataTable in ajax response in grails

How to update dataTable in ajax response in grails

I have a template with table that uses Jquery data table. In whole page
refresh i got the data table design correctly. But when i update table
with ajax , i could n't get data table with design. It render normal table
without design. What is the mistake i have done.
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>
I have included file for datatable in main.gsp that is under the layout
folder in views
In 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" />
In 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');
});

No comments:

Post a Comment