how to fix DataTables warning: table id=example - Cannot reinitialise DataTable

njjosh

I'm using footercallback, and then I want to add a function to print report but when I write a code for that functions under the script of footercallback, it says canoot reinitialise datatable. and the totaled value disappeared.
here's how I constructed the codes:

                                                        `<script>
                                $(document).ready(function() {
                                    $('#example').DataTable( {
                                        "footerCallback": function ( row, data, start, end, display ) {
                                            var api = this.api(), data;

                                            // Remove the formatting to get integer data for summation
                                            var intVal = function ( i ) {
                                                return typeof i === 'string' ?
                                                    i.replace(/[\$,]/g, '')*1 :
                                                    typeof i === 'number' ?
                                                        i : 0;
                                            };

                                            // Total over all pages
                                            total = api
                                                .column( 5 )
                                                .data()
                                                .reduce( function (a, b) {
                                                    return intVal(a) + intVal(b);
                                                }, 0 );

                                            // Total over this page
                                            pageTotal = api
                                                .column( 5, { page: 'current'} )
                                                .data()
                                                .reduce( function (a, b) {
                                                    return intVal(a) + intVal(b);
                                                }, 0 );

                                            // Update footer
                                            $( api.column( 5 ).footer() ).html(
                                              ' ₱'+pageTotal // +' ( ₱'+ total + ')' ouput the total of all pages //
                                            );
                                        }
                                    } );
                                } );
                            </script>
                            <script type="text/javascript">
                                    $(document).ready(function() {
                                    $('#example').DataTable( {
                                        dom: 'Bfrtip',
                                        buttons: [
                                            'copy', 'csv', 'excel', 'pdf', 'print'
                                        ]
                                    } );
                                } );
                            </script>`

kthorngren

Did you follow the steps at the URL provided in the alert?

The problem is you are trying to initialize Datatables twice. You need to combine your initialization options into one init. Move your footerCallback into the second initialization.

Kevin

njjosh

I read it, but I still dont get it.

njjosh

here is my test

http://live.datatables.net/velobeba/1/

kthorngren

Try this:
http://live.datatables.net/zebovipa/1/edit

I combined the initialization code into one init. Note also that I added the JS and CSS includes for the buttons to display. I also changed the footCallback column from 5 to 3.

Kevin

njjosh

It works, but the buttons, are nowhere to be found, I'll just find a way to display the buttons. Thanks a lot.

njjosh

SAD for me. I've copy all the js and css from the test case, but still the button wont display, and the show [no.] entries disappeared. when I delete the dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ],

it shows again.

kthorngren

My guess is you have a syntax error. Take a look at the browser's console for any errors.

Kevin

colin

I made a suggestion on this thread - let's keep it here.