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

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

njjoshnjjosh Posts: 12Questions: 2Answers: 0

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>`

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 5,544Questions: 19Answers: 1,233

    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

  • njjoshnjjosh Posts: 12Questions: 2Answers: 0

    I read it, but I still dont get it.

  • njjoshnjjosh Posts: 12Questions: 2Answers: 0
  • kthorngrenkthorngren Posts: 5,544Questions: 19Answers: 1,233
    Answer ✓

    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

  • njjoshnjjosh Posts: 12Questions: 2Answers: 0

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

  • njjoshnjjosh Posts: 12Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 5,544Questions: 19Answers: 1,233

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

    Kevin

  • colincolin Posts: 4,694Questions: 0Answers: 823

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

Sign In or Register to comment.