Footer Feedback - Javascript Initialise code

robbsandy

1. Use the Generator for Editor to create application server-side php.

2. Edit/Add code from example: (Bottom of HTML or table.example.js file)

A. Javascript code from "Footer Feedback" example:

$(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( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

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

        // Update footer
        $( api.column( 4 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
} );

} );

B. Code from table.example.js file

/*
* Editor client script for DB table example
* Created by http://editor.datatables.net/generator
*/

(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.example.php',
table: '#example',
fields: [
{
"label": "First name:",
"name": "first_name"
},
{
"label": "Last name:",
"name": "last_name"
},
{
"label": "Position:",
"name": "position"
},
{
"label": "Office:",
"name": "office"
},
{
"label": "Salary:",
"name": "salary"
}
]
} );

var table = $('#example').DataTable( {
    dom: 'Bfrtip',
    ajax: 'php/table.example.php',
    columns: [
        {
            "data": "first_name"
        },
        {
            "data": "last_name"
        },
        {
            "data": "position"
        },
        {
            "data": "office"
        },
        {
            "data": "salary"
        }
    ],
    select: true,
    lengthChange: false,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
} );

} );

}(jQuery));

Question: Where would I add or edit "Footer Feedback" example code? Do I edit the table.example.js or add it to the bottom on the HTML file?

If I add the code to the table.example.js file I receive the error:

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3.

robbsandy

Question: Where would I add or edit "Footer Feedback" example code into the datatables generator application?

Do I edit the table.example.js or add it to the bottom on the HTML file?

kthorngren

The error indicates that initializing Datatables more than once is not supported which it looks like you are doing. The footerCallback code would be placed inside the Datatables initialization code in the generated table.example.js script.

Kevin

robbsandy

Thanks Kevin, That make sense. If I add the code inside the table.example.js, It looks like it would go after.

I believe this would still trigger the error. The sample code listed below has the footerCallback and table.example.js together. Is there a correct way to add/edit the code?

(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.example.php',
....
"label": "Salary:",
"name": "salary"
}
]
} );

[footeCallback sample code]

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


var table = $('#example').DataTable( {
    dom: 'Bfrtip',
    ajax: 'php/table.example.php',
    columns: [
        {
            "data": "first_name"
        },
...

Thanks again for all your help!

Rob

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Getting there! As Kevin notes you would only want one $().DataTable() initialisation. Have a look at this part of the manual which shows how you can have multiple options for a single table.

Allan

robbsandy

Thanks Allan,

That was the answer:

Error:

$('#example').dataTable( {
paging: false
} );

$('#example').dataTable( {
searching: false
} );

Correct/Fix:

$('#example').dataTable( {
paging: false,
searching: false
} );

Rob