datatable as input

datatable as input

LapointeLapointe Posts: 373Questions: 70Answers: 4


Is there a way to set footerCallback for datatable input?

I use a hidden datatable as input to load query result in an edit form, and want to print it's content (that's running) but cannot finf how to show columns total.

I try use footercallback in datatable control config or outside, but can't show footer for the datatable control

** $( api.column( i ).footer() ).html(); return undefined...**

Can help please ?

                        .add({  // liste à imprimer...
                            name: 'UrssafFacPrint',
                            type: 'datatable',
                            optionsPair: {
                                value: 'ID',
                            config: {
                                columns: [
                                        title: 'N°',
                                        data: 'numFac'
                                        title: 'Client',
                                        data: 'cliAll'
                                        title: 'Date',
                                        data: 'datFac'
                                        title: 'Banque',
                                        data: 'datBqe'
                                        title: 'Période',
                                        data: 'perUrs'
                                footer: true,
                                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
                                    for(var i=5, ien = api.columns().count(); i<ien; i++){
                                        total = api
                                            .column( i )
                                            .reduce( function (a, b) {
                                                return intVal(a) + intVal(b);
                                            }, 0 );
                                        $( api.column( i ).footer() ).html(
                                            total.toFixed(2) +'€'
                                select: false,
                                searching: false,
                                info: false

                                    action: function () {
                                        $.ajax ({
                                            url: 'getdata.php',
                                            method: 'POST',
                                            dataType: 'JSON',
                                            data: {
                                                U:          sAloneEditor.field('UrssafFacList').val(),
                                                z:          'UrssafFacPrint',
                                                Opt:        'recettes'
                                            success: function ( JSON ) {
                                                sAloneEditor.field('UrssafFacPrint').update( JSON );
                                                var dtAI = sAloneEditor.field('UrssafFacPrint').dt();
                                                new $.fn.dataTable.Buttons( dtAI, {
                                                    buttons: [
                                                            title: 'Préparation URSSAF en date du '+GetDateFr('l d F Y'),
                                                            footer: true,
                                                            exportOptions: {
                                                                columns: ':visible'
                                                } );
                                                dtAI.button( '.buttons-print' ).trigger();

This question has accepted answers - jump to:


  • allanallan Posts: 54,701Questions: 1Answers: 8,556 Site admin

    There is no option to have a footer in the datatable input type yet I'm afraid. I'll need to have a little think about how this might be done as adding a footer isn't actually something that DataTables does at the moment (it will just use whatever is in the HTML, and in the datatable generated HTML there is no footer).


  • allanallan Posts: 54,701Questions: 1Answers: 8,556 Site admin
    Answer ✓

    I'll add an option to address this in the next release of Editor (DD-1933 is our internal tracking number for this).


  • LapointeLapointe Posts: 373Questions: 70Answers: 4


  • allanallan Posts: 54,701Questions: 1Answers: 8,556 Site admin
    Answer ✓

    Just to say that this has now been committed - I've added a footer option to the datatable field type which you can use with an array of strings, pass in a string with the row HTML or a DOM row node. It will be in 2.0.2.


  • LapointeLapointe Posts: 373Questions: 70Answers: 4

    Hi @allan

    Thanks everydays for your product.

    Waiting for this next release....

  • LapointeLapointe Posts: 373Questions: 70Answers: 4

    Just a question...

    I try to extend datetime to add a clear button (because when keyinput is disabled...)

    So I alter the structure as

    var structure = $(
        '<div class="'+classPrefix+'">'+
            '<div class="'+classPrefix+'-date">'+
                '<div class="'+classPrefix+'-title">'+
                    '<div class="'+classPrefix+'-iconClear" ' +
                        'style="height: 10px; width: 10px; position: absolute; top: 12px; left: 0px; ' +
                            '-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);">'+
                        '<button title="'+i18n.clear+'"></button>'+
                    '<div class="'+classPrefix+'-iconLeft">'+

    add a onclick case as (line +- 460)

    .on( 'click', function (e) {
        var d = that.s.d;
        if ( parent.hasClass(classPrefix+'-iconLeft') ) {
            // Previous month
            that.s.display.setUTCMonth( that.s.display.getUTCMonth()-1 );
        else if ( parent.hasClass(classPrefix+'-iconClear') ) {
            // EMPTY input field
            that.dom.input.val( null ).trigger('change');
        else if ( button.parents('.'+classPrefix+'-time').length ) {

    add a default value as (line +- 1430)

    DateTime.defaults = {
        attachTo: 'body',
        // Not documented - could be an internal property
        classPrefix: 'dt-datetime',
        // show clear button
        allowClear: true,

    use the default value in constructor

        _constructor: function () {
            var that = this;
            var classPrefix = this.c.classPrefix;
            var last = this.dom.input.val();
                    .css( 'visibility', this.c.allowClear ? 'visible' : 'hidden' );
            var onChange = function () {

    Setting default extenally do the job, but...
    first point ... these modifications will be destroyed with the next release from spry media...
    Second point... do not find how to set conf value at create input time (for each input)...

    Can you tell me where to (or what to) read to create external extend of datetime for this functionality if possible ?

    Thanks by advance.

  • allanallan Posts: 54,701Questions: 1Answers: 8,556 Site admin

    Hi Bob,

    There isn't a way to add this ability to the DateTime picker without modifying the library. We will be adding the clear button to the next release of DateTime.

    Also, you can't access the field's conf parameter (which I presume is what you are looking for) at this point since it isn't passed into the DateTime picker. You would need to modify the datetime field type of Editor to pass in extra information. What is the config value you want to set?


  • LapointeLapointe Posts: 373Questions: 70Answers: 4

    Hi @allan again thanks (the keyboard key to write "thanks" are used, limit damaged... your fault :)

    In fact I just want to enable / disable the clear option for each datetime inputs separately... Actually (Just modifying structure and click event in datatime.js) I use class style to show / hide the clear option button... Not really academic yet...

    So I was thinking about a conf option as described in previous message... to set allowClear option as

    name: 'Calendar',
    type: 'datetime', 
    allowClear: false,
  • allanallan Posts: 54,701Questions: 1Answers: 8,556 Site admin
    Answer ✓

    Got it - thanks. The way that would be implemented is to have an option in DateTime such as allowClear or clear and also have an option for that in the datetime configuration. I’ll make sure that is made available.


Sign In or Register to comment.