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: .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 );
            }
        }
    }
} );

} );

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 );
            }
        }
    }
} );

} );

• javascript
• jquery
• datatable

• You have to show your code – R Lam Commented Dec 30, 2015 at 9:41
• i did add my script, can you help me? – Hoàng Trung Hiếu Commented Dec 30, 2015 at 9:47
• Do you include all css files as in the example ? – Zoran Pandovski Commented Dec 30, 2015 at 9:55
• 1 yep i include all css and jquery file in the example – Hoàng Trung Hiếu Commented Dec 30, 2015 at 9:56

8 Answers 8

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.

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

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.

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:

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 );
            }
        }
    }
});

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

tfoot {display: table-header-group;}

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";

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]},