Topic: mdb select on datatable
i have a dynamic dropdown in json code in datatable
$status=' <select class="mdb-select status colorful-select dropdown-primary" id="status">
<option value="0">Application Submited</option>
<option value="1">CDR Received</option>
<option value="2">Send To IO</option>
<option value="3">NO DATA</option>
</select>';
"columns" : [
{ "data": '',
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;}},
{ "data" : "reference_num" },
{ "data" : "application_date"},
{ "data" : "fir_num"} ,
{ "data" : "fir_date" },
{ "data" : "fir_io"},
{ "data" : "fir_us"} ,
{ "data" : "offense" },
{ "data" : "ps"},
{ "data" : "status"} ,
{ "data" : "actions" }
]
});
$('.status').material_select();
$('#datatable_filter').css('text-align','right');
$('th').css('text-align','center');
$('tbody').css('text-align','center');
$('#datatable_wrapper').find('label').each(function () {
$(this).parent().append($(this).children());
});
$('#datatable_filter input').attr("placeholder", "Search");
$('#datatable_wrapper .dataTables_length').addClass('d-flex flex-row');
$('#datatable_wrapper .dataTables_filter').addClass('md-form');
$('#datatable_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
$('#datatable_wrapper select').addClass('mdb-select');
$('#datatable_wrapper .mdb-select').material_select();
$('#datatable_wrapper .dataTables_filter').find('label').remove();
$('#datatable_length label').css('margin-top','25px');
$('.select-wrapper ').css('margin-left','20px');
$('#mdb-preloader').css('display','none');
the dropdown is not initializing
I don't know if this helps but the latest versions of datatables.js adds the classes "custom-select" and custom-select-sm" to the select box.
The latest versions of material-select.js specifically say don't run material select if it has the class "custom-select".
I am now adding "browser-default" to the datatables.js class naming and it works... but now have to contend with styling forced with that.
Anna Morawska staff commented 5 years ago
Hi leegellie, thank you for sharing your observation with us!FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.9
- Device: desktop
- Browser: chrome
- OS: win 10
- Provided sample code: No
- Provided link: No
Anna Morawska staff commented 5 years ago
Hi, do you have a working example? What are the steps to reproduce this issue? It looks like you have two material selects. Maybe try to add additional, unique class to the second one and then initialize it using your custom class. Best, Ania