Datatables not showing the button for detail

Question

I trying to use datatables on my web, but after i add every thing on my web, it does not show the thing like the template i saw. This is the template And this is the thing i got

i mean i can not see the plus button so that i can not see the detail of the product. This button just show when i make browser become smaller like this, but i need that even when the browser is large like in the template

Do you have any idea, please help? This is the template that i follow: https://datatables.net/extensions/responsive/examples/display-types/foundation-modal.html This is my script:

$(document).ready(function() {
$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for '+data[0]+' '+data[1];
                }
            } ),
            renderer: function ( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                    return '<tr>'+
                            '<td>'+col.title+':'+'</td> '+
                            '<td>'+col.data+'</td>'+
                        '</tr>';
                } ).join('');

                return $('<table width="100%"/>').append( data );
            }
        }
    }
} );

} );

Answer 1

For anyone still finding this in 2018

I found out the issue with my 'plus' buttons not appearing ( when in a responsive, mobile view ) was because they are appended to the 'first child' of the row, so if a row other than the first is given responsive priority over that row then the button disappears along with it.

Answer 2

the best answer is use "responsivePriority", by default all priority is 10,000 if you want change it set by yourself, for example:

sortable: false,
data: "Id",
className: 'details-control',
responsivePriority: 1