CODEWITHSUNDEEP
datatables
Mbrouwer88
Mbrouwer88

Reputation: 2282

Datatables responsive, set specific options

I am using DataTables with the responsive extension on our web application, but I have a question.

When the table is made responsive, it should hide the pagination option.

I tried this with "bLengthChange": false:

 $(function () {
        $("#table1").DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
            },
            "order": [[1, "asc"]],
            "bAutoWidth": false,
            responsive: {
                details: {
                    type: 'column'
                },
                "bLengthChange": false
            },
            columnDefs: [ {
                className: 'control',
                orderable: false,
                targets:   0
            } ],
        });
    });

However, this does not work. My target is that I can see the pagination amount dropdown menu on fullscreen, but that option should be hidden if responsive.

Can I add options like bLengthChange specific to the "responsive" state?

Upvotes: 0

Views: 272

Answers (2)

Mbrouwer88
Mbrouwer88

Reputation: 2282

Thank you.

Fixed it with this CSS:

@media screen and (max-width: 767px){
    div.dataTables_wrapper > div.row > div > div.dataTables_length{
        display: none;
    }
}

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85518

Can I add options like bLengthChange specific to the "responsive" state?

No, you cannot. Try inspect $.fn.dataTable.Responsive.defaults again, as I believe you already have done. It does not give so much sense either, the responsive extension is an extension while lengthMenu is a core feature. If you want to hide the lengthMenu you would need to reinitialise the table or do something hackish that may or may not conflict with other features or other extensions. But you can do the hack yourself. Hook into the responsive-resize event and hide or show the lengthMenu according to the responsive status :

table.on( 'responsive-resize', function ( e, datatable, columns ) {
  var $lengthMenu = $('.dataTables_length')
  var count = columns.reduce( function (a,b) {
    return b === false ? a+1 : a;
  }, 0 );
  if (count>0 && $lengthMenu.is(':visible')) $lengthMenu.hide()
  if (count<= 0 && !$lengthMenu.is(':visible')) $lengthMenu.show()
} );

demo -> http://jsfiddle.net/v1dnxLkg/

Upvotes: 1

Related Questions