datatable as input

Lapointe

Hi

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 )
                                            .data()
                                            .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: [
                                                        {
                                                            extend:'print',
                                                            title: 'Préparation URSSAF en date du '+GetDateFr('l d F Y'),
                                                            footer: true,
                                                            exportOptions: {
                                                                columns: ':visible'
                                                            }
                                                        }
                                                    ]
                                                } );
                                                dtAI.button( '.buttons-print' ).trigger();
                                            }
                                        })
                                    }

allan

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).

Allan

allan

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

Allan

Lapointe

allan

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.

Regards,
Allan

Lapointe

Hi @allan

Thanks everydays for your product.

Waiting for this next release....
Bob

Lapointe

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">'+
//RB
                '<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>'+
//RB
                '<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');
        that._hide();
    }

    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();

        this.dom.title.find('div.'+classPrefix+'-iconClear')
                .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.
Bob

allan

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?

Allan

Lapointe

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,
 ...

allan

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.

Allan