lengthMenu not work with Editor 2.0.0

SWATswat

Hello,
The lengthMenu is not displayed although it is requested in the code:

var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "Staff_KPI_performance_operationnelle_flux_Modif_ETP.php",
        table: "#EditETP",
        fields: [ {
                label: "Date :",
                name: "date_nbre_etp_productivite",
                type: "readonly"
            },
            {
                label: "MOD IN :",
                name: "nbre_mod_entree"
            },
            {
                label: "MOD OUT :",
                name: "nbre_mod_sortie"
            },
            {
                label: "MOD REPACK :",
                name: "nbre_mod_repack"
            },
            {
                label: "MOI :",
                name: "nbre_moi"
            },
            {
                label: "Maladie :",
                name: "nbre_maladie"
            },
            {
                label: "Congés :",
                name: "nbre_conges"
            },
            {
                label: "Secteur :",
                name: "secteur",
                type: "readonly"
            },
            {
                label: "Equipe :",
                name: "equipe_nbre_etp_productivite",
                type: "readonly"
            }
        ]
    } );

     $('#EditETP').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "Staff_KPI_performance_operationnelle_flux_Modif_ETP.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: "date_nbre_etp_productivite" },
            { data: "nbre_mod_entree" },
            { data: "nbre_mod_sortie" },
            { data: "nbre_mod_repack" },
            { data: "nbre_moi" },
            { data: "nbre_maladie" },
            { data: "nbre_conges" },
            { data: "secteur" },
            { data: "equipe_nbre_etp_productivite" }
        ],
         select: true,
        buttons: [
            { extend: 'edit',   editor: editor }
        ],
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]]
    } );
} );

here are the javascript pages called for Datatable and my project:
JS

<script type="text/javascript" src="./vendors/jquery/dist/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="./vendors/moment/moment.js"></script>
<script type="text/javascript" src="./vendors/metismenu/dist/metisMenu.js"></script>
<script type="text/javascript" src="./vendors/bootstrap4-toggle/js/bootstrap4-toggle.min.js"></script>
<script type="text/javascript" src="./vendors/jquery-circle-progress/dist/circle-progress.min.js"></script>
<script type="text/javascript" src="./vendors/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="./vendors/toastr/build/toastr.min.js"></script>
<script type="text/javascript" src="./vendors/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>
<script type="text/javascript" src="./vendors/apexcharts/dist/apexcharts.min.js"></script>
<script type="text/javascript" src="./vendors/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="./vendors/slick-carousel/slick/slick.min.js"></script>
<script type="text/javascript" src="./vendors/@chenfengyuan/datepicker/dist/datepicker.min.js"></script>
<script type="text/javascript" src="./vendors/daterangepicker/daterangepicker.js"></script>
<!-- DATATABLE EDITOR 2.0.0 -->
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.3.2/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/datetime/1.0.2/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="./Editor-PHP-2.0.0--kpi/js/dataTables.editor.min.js"></script><!---->
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
<!-- PERSO -->
    <!-- Modal Loading -->
<script type="text/javascript" language="javascript" src="./js/modal-loading.js" ></script>
    <!-- Hightcharts -->
<script type="text/javascript" language="javascript" src="./vendors/Highcharts-7.2.0/code/highcharts.js"></script>
<script type="text/javascript" language="javascript" src="./vendors/Highcharts-7.2.0/code/modules/series-label.js"></script>
<script type="text/javascript" language="javascript" src="./vendors/Highcharts-7.2.0/code/modules/exporting.js"></script>

CSS

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.0.2/css/dataTables.dateTime.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.2/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="Editor-PHP-2.0.0--kpi/css/editor.dataTables.min.css">

there is an overlay of filter icons that I can't explain ?

A idea please ?
Thanks in advence

kthorngren

Please see this FAQ about your dom options.

Kevin

SWATswat

Hello kthorngren
Thank you very much for your Help, it's work perfecly now.

Thanks.