Datatable child buttons not worked

Datatable child buttons not worked

dpapinidpapini Posts: 13Questions: 4Answers: 0

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?

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • dpapinidpapini Posts: 13Questions: 4Answers: 0
    edited January 2019
  • dpapinidpapini Posts: 13Questions: 4Answers: 0
    edited January 2019

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • dpapinidpapini Posts: 13Questions: 4Answers: 0
    edited January 2019

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • dpapinidpapini Posts: 13Questions: 4Answers: 0

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

  • dpapinidpapini Posts: 13Questions: 4Answers: 0

    Now it's online right version

    Thank You

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • dpapinidpapini Posts: 13Questions: 4Answers: 0

    thank you. you 've right.

    i change my code and now it work.

  • dpapinidpapini Posts: 13Questions: 4Answers: 0

    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

This discussion has been closed.