Search

Hello, I'm trying to make the multi-select box larger, on small items like age, it's not wide enough to show all the data. This is an example: http://live.datatables.net/xehexoye/1/edit I'm 99.9% sure it's in the select2.min.css, but I'm not sure exactly which setting is causing it not to be larger enough. I'm thinking padding and I've changed a bunch with no change. Can anyone point me in the direction of how to know which setting needs to be changed? Thanks for your help

I made a custom filtering option for my DataTable

size and the search filters in Java side to

Hi, I have a problem with the export xls when the filters are activated. In excel all columns are a big size. Have you a solution ? Thank you

currently I'm using a Ajax for my data to be loaded/fetch in my datatable my problem is that when i tried to run my code the datatable is not showing up even though it is being catch in the console.log that i've used for testing purpose. and it is not working even though there is no error in the code that I'm using :( $(document).ready(function() { var table = $('#example').DataTable( { "ajax": "js/datatables/datatableAdminGenerateFullReport.json", "columns": [ { "mData": "ID #" }, { "mData": "Name" }, { "mData": "Transaction Date" }, { "mData": "Transaction ID"}, { "mData": "Currency" }, { "mData": "Amount" }, { "mData": "Source"}, { "mData": "Status"} ], dom: 'Bfrtip', lengthChange: false, buttons: [ { extend:'copyHtml5', text: '', titleAttr: 'Copy', messageTop: 'The information in this table is copyright to AU Remit.' }, { extend: 'excelHtml5', text: '', titleAttr: 'Excel', messageTop: 'The information in this table is copyright to AU Remit.' }, { extend: 'pdfHtml5', text: '', titleAttr: 'PDF', textAlign: 'center', messageBotom: 'The information in this table is copyright to AU= Remit.' }, { extend: 'colvis' } ] }); table.buttons("#example_filter").container().insertAfter('#example_filter'); }); $("#min, #max").keyup( function(){ table.draw(); }); $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ){ console.log("hello"); var arr_min = parseInt($("#min").val()); var arr_max = parseInt($("#max").val()); var arr_date = parseFloat(data[2]) || 0; var iMin = new Date(Date.parse(arr_min)); var iMax = new Date(Date.parse(arr_max)); var iDate = new Date(Date.parse(arr_date)); if (iMin == "" && iMax == "") { return true; } else if (iMin == "" && iDate <= iMax) { return true; } else if (iMin <= iDate && "" == iMax) { return true; } else if (iMin <= iDate && iDate <= iMax) { return true; } return false; } );

'''$(document).ready(function () { $.ajax({ url: 'StudentService.asmx/GetStudents', method: 'post', dataType: 'json', success: function (data) { $('#datatable').on('processing.dt', function (e, settings, processing) { $('#processingIndicator').css('display', processing ? 'block' : 'none'); }) .DataTable({ initComplete: function () { this.api().columns([3,4]).every(function() { var column = this; var select = $('<select><option value="">ALL</option></select>') .appendTo( $(column.header()).empty() ) .on( 'change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search( val ? '^'+val+'$' : '', true, false ) .draw(); } ); column.data().unique().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) } ); } ); }, paging: true, sort: true, searching: true, scrollY: 450, scrollX: 1800, "lengthMenu": [[19, 25, 50], [19, 25, 50]], columnDefs: [{ type: "salary-grade", targets: [3], orderData: [3, 4, 1], }], order: [[3, "asc"]], data: data, columns: [ { 'data': 'id' }, { 'data': 'name' }, { 'data': 'fname' }, { 'data': 'CLASS' }, { 'data': 'section' }, { 'data': 'contact', 'sortable': false, 'searchable': false }, { 'data': 'sex', 'render': function (data, type, row) { switch (data) { case 'Male': return 'free'; break; case 'Female': return 'paid'; break; default: return 'N/A'; } } }, { 'data': 'dob', 'render': function (jsonDate) { var date = new Date(parseInt(jsonDate.substr(6))); var month = date.getMonth() + 1; return date.getDate()+"-" + month + "-" + date.getFullYear(); } }, { 'data': 'address' }, { 'data': 'admdate', 'render': function (jsonDate) { var date = new Date(parseInt(jsonDate.substr(6))); var month = date.getMonth() + 1; return date.getDate()+"-" + month + "-" + date.getFullYear(); } }, { 'data': 'session', 'render': function (data, type, row) { switch (data) { case '1015': return '2017-18'; break; case '1016': return '2018-19'; break; default: return 'N/A'; } } }, { 'data': 'type', 'render': function (data, type, row) { switch (data) { case 'True': return 'Old'; break; case 'False': return 'New'; break; default: return 'N/A'; } } } ] }); } }); }); </script>'''

Hello! I'd like to set a default value in one of the camps of the multi-filter select (https://datatables.net/examples/api/multi_filter_select.html) I'd also like to set the default searchbar text to said value. Is it possible to do both? Thanks!!!

I am using bootstrap datatable with date column and more than one text columns. I want to apply filters on date column(Daterange) and text column on button click event. The table also have paging also.

Hi, When I use translation the customization on both fiedls stop working. Can someone help me? This is my code: $(document).ready(function () { $.ajax({ url: "Default.aspx/generateData", type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", success: function (retorno) { $('#myTable').DataTable({ data: JSON.parse(retorno.d), dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>", language: { url: 'https://cdn.datatables.net/plug-ins/1.10.16/i18n/Portuguese-Brasil.json' }, createdRow: function (row, data, dataIndex) { if ((data['dtencerramentoalerta'] == null) || (data['dtencerramentoalerta'] == '')) { $(row).addClass("danger"); } else { $(row).addClass("warning"); } }, order: [[ 2, "desc" ]], columnDefs: [ { className: "text-center", "targets": [0, 1, 2, 3, 4] }, { orderable: false, "targets": [4] } ], columns: [ { 'data': 'column1' }, { 'data': 'column2' }, { 'data': 'column3' }, { 'data': 'column4' }, { 'data': null, 'fnCreatedCell': function (nTd, sData, oData, iRow, iCol) { $(nTd).html("<a href=test.aspx?data=" + oData.column5+ "><i class=\"fa fa-area-chart fa-fw\"></i></a>"); }, 'bSearchable': false } ] }); }, complete: function () { $('div.dataTables_filter input').addClass("form-control"); $('div.dataTables_filter input').addClass("input-sm"); $('div.dataTables_length select').addClass("form-control"); $('div.dataTables_length select').addClass("input-sm"); } }); }); If I remove the following lines the css classess are applied successfully: language: { url: 'https://cdn.datatables.net/plug-ins/1.10.16/i18n/Portuguese-Brasil.json' }, Cheers

Hi, I have used multi-select drop-down for individual column filtering. I am updating data of table and reloading table again but it loses its selected values after that. Is there any way to retain this drop-down selection?