/* ------------------------------------------------------------------------------ * * # Responsive extension for Datatables * * Specific JS code additions for datatable_responsive.html page * * Version: 1.0 * Latest update: Aug 1, 2015 * * ---------------------------------------------------------------------------- */ $(function() { // Table setup // ------------------------------ // Setting datatable defaults $.extend( $.fn.dataTable.defaults, { autoWidth: false, responsive: true, columnDefs: [{ orderable: false, width: '100px', targets: [ 5 ] }], dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>', language: { search: '<span>Filter:</span> _INPUT_', lengthMenu: '<span>Show:</span> _MENU_', paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' } }, drawCallback: function () { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup'); }, preDrawCallback: function() { $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup'); } }); // Basic responsive configuration $('.datatable-responsive').DataTable(); // Column controlled child rows $('.datatable-responsive-column-controlled').DataTable({ responsive: { details: { type: 'column' } }, columnDefs: [ { className: 'control', orderable: false, targets: 0 }, { width: "100px", targets: [6] }, { orderable: false, targets: [6] } ], order: [1, 'asc'] }); // Control position $('.datatable-responsive-control-right').DataTable({ responsive: { details: { type: 'column', target: -1 } }, columnDefs: [ { className: 'control', orderable: false, targets: -1 }, { width: "100px", targets: [5] }, { orderable: false, targets: [5] } ] }); // Whole row as a control $('.datatable-responsive-row-control').DataTable({ responsive: { details: { type: 'column', target: 'tr' } }, columnDefs: [ { className: 'control', orderable: false, targets: 0 }, { width: "100px", targets: [6] }, { orderable: false, targets: [6] } ], order: [1, 'asc'] }); // External table additions // ------------------------------ // Add placeholder to the datatable filter option $('.dataTables_filter input[type=search]').attr('placeholder','Type to filter...'); // Enable Select2 select for the length option $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity, width: 'auto' }); });