Datatable child buttons not worked

dpapini

hi i used 1.10.12 version, i've created a datatable master and on doble click row i draw a datatable details. on detail i want use a buttons plugin but not worked and not fire anything javascript function. below my code of detail datatable .

function format(rowData) {
var div = $('

')
.addClass('loading')
.css('overflow', 'auto')
.css('height', '40vh')
.text('Loading...');

        var _url = App.getGlobalWcfErgonPath() + "GetDtPianoDiCaricoDetail"
        var _data = JSON.stringify({ pCdDeposito: $("#pCdDeposito").val(), pDtConsegna: moment($('#pDtConsegna').closest('div.date-picker').datepicker('getDate')).format(), pCdGiro: rowData.CdGiro });

        var detailsTableOpt = $('#tablePianodicaricoDetail').clone().attr('id', 'tablePianodicaricoDetail' + rowData.CdGiro).dataTable({
            'dom': 'Bfrtip',
            'data': [],
            'searching': false,
            'info': false,
            'paging': false,
            'language': { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json" },
            'destroy': true,
            'order': [],
            'buttons': [
                {
                    text: '<i class="fa fa-print" aria-hidden="true"></i>',
                    titleAttr: 'Stampa',
                    action: function (e, dt, node, config) {
                        alert('Button is enabled');
                    }
                },
                {
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copia',
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel',
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF',
                }
            ],
            'columns': [
                { data: "CdCli", title: "Cliente", className: "dt-center", visible: true, orderable: false },
                { data: "RagioneSociale", title: "Ragione Sociale", className: "dt-left progress", visible: true, orderable: false },
                { data: "GV", title: "GV", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                { data: "OF", title: "OF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                { data: "SG", title: "SG", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                { data: "PF", title: "PF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                { data: "CR", title: "CR", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                { data: "SL", title: "SL", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
                { data: "TotaleKg", title: "Tot. KG.", className: "dt-right", visible: true, orderable: false },
                { data: "Im", title: "Importo", className: "dt-right", visible: true, orderable: false },
            ],
        });

        $.ajax({
            type: "POST",
            data: { "StringSearch": _data },
            url: _url,
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
        }).done(function (result) {
            detailsTableOpt.show();
            detailsTableOpt.DataTable().clear().draw();
            detailsTableOpt.DataTable().rows.add($.parseJSON(result.Data)).draw();
            var h = $(detailsTableOpt.DataTable().table().container()).html()
            div.html(h).removeClass('loading');
        }).fail(function (jqXHR, textStatus, errorThrown) {
            alert("errore:" + textStatus);
        });

        return div;
    }

    function Details(data, tr) {

        var row = $('#tablePianodicaricoMaster').DataTable().row()

        if (tr.child.isShown()) {
            // This row is already open - close it
            tr.child.hide();
            $(tr).removeClass('shown');
        }
        else {
            // Open this row
            row.child(format(row.data())).show;

            $(tr).addClass('shown');
        }

    }

somebody can help me?

kthorngren

I have this example that I added buttons to the child table and it works:
http://live.datatables.net/hixodato/1/edit

I don't see anything scanning your above code that looks like a problem. Do you get errors in the browser's console?

Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

dpapini

my debug
https://debug.datatables.net/azinuw

dpapini

i'm forget to post my listener

    $('#tablePianodicaricoMaster tbody').on('dblclick', 'tr', function () {
        var tr = $(this).closest('tr');
        var row = $('#tablePianodicaricoMaster').DataTable().row(tr);
        var idx = $.inArray(tr.attr('id'), detailRows);

        if (row.child.isShown()) {
            tr.removeClass('details');
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice(idx, 1);
        }
        else {
            tr.addClass('details');
            row.child(format(row.data())).show();

            // Add to the 'open' array
            if (idx === -1) {
                detailRows.push(tr.attr('id'));
            }
        }
    });

i've tried to add button on my master table and it work fine.
only detail table not work then buttons

kthorngren

The debug link isn't working but won't be much help to determine why the buttons aren't functioning. In order to help we would need to see the code running. please post a link to your page or a test case replicating the issue.

Kevin

dpapini

http:\test.saporiditoscana.com
u:guest
p:12345678!

select from left menu
LOGISTICA->PIANO DI CARICO
on page select DEPOSITO GROSSETO and click on button CERCA

kthorngren

I followed the steps above but it doesn't seem like the page is configured to display the buttons. This is what I see for the child table:

            var detailsTableOpt = $('#tablePianodicaricoDetail').clone().attr('id', 'tablePianodicaricoDetail' + rowData.CdGiro).dataTable({
                'dom': 'frtip',

Kevin

dpapini

Sorry, i'm forget to delivery version.
Just a moment i'm delivering

dpapini

Now it's online right version

Thank You

kthorngren

I think the problem is due to the Datatable events binding to the HTML table you are cloning from and not the "cloned" table. You can see this in the example I built based on your example:
http://live.datatables.net/hukahopa/1/edit

Try searching for text that is not in the child table and you will see it doesn't update. I think you will need to change your code to not use the cloning technique.

Kevin

dpapini

thank you. you 've right.

i change my code and now it work.

dpapini

Hi can you help me? i've add a listener for detail row, bua not fired it.

this is my listener
// Add event listener for opening and closing second level child details
$('.child_table tbody').off().on('dbclick', 'td.details-control1', function () {
var tr = $(this).closest('tr');
var row = $('#tablePianodicaricoMaster').DataTable().row(tr);
var rowData = row.data();
var _url = App.getGlobalWcfErgonPath() + "GetDtDetailOrdine";
var _data = JSON.stringify({ pAnnoOrd: rowData.AnnoOrdine, pNrOrd: rowData.NrOrdine });

            $.ajax({
                type: "POST",
                data: { "StringSearch": _data },
                url: _url,
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
            }).done(function (result) {

                $.get("/Home/OrdineModalJson?JsonData=" + result, function (t) {
                    $('#modalOrdine').html(t);
                    $('#modalOrdine').modal({ keyboard: true, });
                    $('#modalOrdine').data('bs.modal').handleUpdate();
                })

            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert("errore:" + textStatus);
            });

        });

thank you