Topic: mdb select on datatable

Ch Paras free asked 6 years ago


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  

Anna Morawska staff commented 6 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

leegellie pro answered 6 years ago


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 6 years ago

Hi leegellie, thank you for sharing your observation with us!


Please insert min. 20 characters.

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