Details button not appear in my solution...

Itamarcus

Hi,
i want insert a datatable like this https://jsfiddle.net/ryanoc/ebRXw/
When resize le window, details button appear. In my solution not working.
This is my solution. Where is the problem?
Thanks in advance.

<div class="row"> <div class="table-responsive"> <table id="myDatatable" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Nome</th> <th>Cognome</th> <th>Username</th> <th>Gruppo Di Lavoro</th> <th>Profilo Funzionalità</th> <th>Edit</th> <th>Delete</th> </tr> </thead> </table> </div> </div>

` <script>
$(document).ready(function () {
var oTable = $('#myDatatable').DataTable({
paging: true,
sort: true,
searching: true,
responsive: {
details: {
type: 'column'
}
},
"ajax": {
"url": '/api/utenti',
"type": "get",
"dataSrc": "",
contentType: "application/json",
error: function (xhr, status, error) {
alert(xhr.responseText);
}
},
"columns": [
{ "data": "Nome", "autoWidth": true },
{ "data": "Cognome", "autoWidth": true },
{ "data": "Username", "autoWidth": true },
{ "data": "GruppoDiLavoro", "autoWidth": true },
{ "data": "ProfiloFunzionalità", "autoWidth": true },
{
"data": "IDutente", 'sortable': false, 'searchable': false, "width": "50px", "render": function (data) {
return '<a class="popup" href="/home/EditUtente/' + data + '">Edit</a>';
}
},
{
"data": "IDutente", 'sortable': false, 'searchable': false, "width": "50px", "render": function (data) {
return '<a class="popup" href="/home/delete/' + data + '">Delete</a>';
}
}
]
})
$('.tablecontainer').on('click', 'a.popup', function (e) {
e.preventDefault();
OpenPopup($(this).attr('href'));
})
function OpenPopup(pageUrl) {
var $pageContent = $('<div/>');
$pageContent.load(pageUrl, function () {
$('#popupForm', $pageContent).removeData('validator');
$('#popupForm', $pageContent).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');

                });
                $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                    .html($pageContent)
                    .dialog({
                        draggable: true,
                        autoOpen: false,
                        resizable: false,
                        model: true,
                        title: 'Edita Utente',
                        height: 550,
                        width: 600,
                        close: function () {
                            $dialog.dialog('destroy').remove();
                        }
                    })
                $('.popupWindow').on('submit', '#popupForm', function (e) {
                    var url = $('#popupForm')[0].action;
                    alert($('#popupForm').serialize())
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: $('#popupForm').serialize(),
                        success: function (data) {
                            if (data.status) {
                                $dialog.dialog('close');
                                oTable.ajax.reload();
                            }
                        },
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);
                        }
                    })

                    e.preventDefault();
                })
                $dialog.dialog('open');
            }
        })
</script>

`

allan

Thanks for your question. As noted in the forum rules, please post a link to a test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Allan