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

Answer 3

Anyone looking for Bootstrap(I am using ver 5.0 alpha1) backed responsive datatables, here is what I did and it "just" works:

<link rel="stylesheet"
    th:href="@{/css/bootstrap.css}" />
<link rel="stylesheet"
    th:href="@{/webjars/datatables/css/dataTables.bootstrap4.min.css}" />
<link rel="stylesheet"
    th:href="@{/webjars/datatables-responsive/2.2.3/css/responsive.bootstrap4.min.css}" />


<your> html code here </your>


<div th:fragment="import_scripts">
<script type="text/javascript"
        th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/datatables/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<script type="text/javascript"
        th:src="@{/js/bootstrap.js}"></script>
<script type="text/javascript"
        th:src="@{/webjars/datatables/1.10.20/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/webjars/datatables-responsive/2.2.3/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/webjars/datatables-responsive/2.2.3/js/responsive.bootstrap4.min.js}"></script>

You can change the path to your own css/js files, but the important part here is the sequence of these files . Make sure you have properly placed the CSSs and JSs in the above mentioned sequence.

Here is the final outcome:

Also, sometimes its the version numbers too for the CSS/JS libs can make a difference.

I am using these: JQuery 3.5.1, PopperJS 1.16.0, Datatable 1.10.20

Hope it helps someone.

Answer 4

Maybe the reason not about "javascript".You can check your html or css,through the comparison of your two images,your frame structrue should have some problems;when the browser window is larger,you can f12 to see those code is exists:

table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
  top: 8px;
  left: 4px;
  height: 16px;
  width: 16px;
  display: block;
  position: absolute;
  color: white;
  border: 2px solid white;
  border-radius: 16px;
  box-shadow: 0 0 3px #444;
  box-sizing: content-box;
  font-family: 'Courier New', Courier, monospace;
  text-indent: 4px;
  line-height: 16px;
  content: '+';
  background-color: #008CBA;

}

beacause the code determines the existence of this button.Hope it can help you: LIKE this:

Answer 5

I also hidden the control icon, so I solved the problem was to add the property:

 type: 'column'

Based on the example in the question, it would look like this:

$('#example').DataTable( {
    responsive: {
        details: {
            type:'column',
            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 6

If You want to show search boxes in Header The Just Write CSS LIke Below... In Datatable...

tfoot {display: table-header-group;}

Answer 7

Add this in your css

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    content: "-";
    background-color: #d33333;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    top: 33%;
    left: 5px;
    height: 1em;
    width: 1em;
    margin-top: -5px;
    display: block;
    position: absolute;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 0.2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New",Courier,monospace;
    line-height: 1em;
    content: "+";
    background-color: #31b131;
}

add this in you JS

targets": [0]-index for which column it want to show

view_tbl = $('#tbl').DataTable({ "ajax": { "url": url, "type": "POST", data: { action: load_action } }, "responsive": true, "columnDefs": [ {className: "dtr-control", "targets": [0]},

Answer 8

I was using this with node and didn't have the css imported. I added this to my app.scss and voilá!

@import "~datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css";