jQuery Datatable Einträge Dropdown wird Standardwert nicht angezeigt - In Firefox

Question

Ich bin mit JQuery Tables 1.10.12 und vor Problem zu

Anzeige den Standardwert für JQuery Datatable "Show Entries" Drop-Down- Steuer .

Zunächst wird die Tabelle ist leer und ich bin Bindung Daten an die Tabelle von wenigen textboxes auf einem button click. Ich kann in der Lage zu erreichen, alle Funktionalitäten verbleibenden (Hinzufügen von Daten zu der Tabelle, Sortierung, Filterung ... etc), aber nicht wissen,

warum der Standardwert für „Show-Einträge“ Drop-down-Steuerung ist nicht erscheinen?

Hier sind die Screenshots

Während Seite

Anzahl der Datensätze in Dropdown aber Standardwert ist nicht erscheinen

geladen

Nach Aufzeichnungen der Datentabelle hinzugefügt - noch Standardwert mich nicht

Unten ist mein Code erscheint, was ich umgesetzt haben bisher

//div holding the Jquery DataTable 
<div id="demo"> </div> 

//Javascript code 

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.dataTables.min.js")"></script> 
<script type="text/javascript"> 
    var table; 
    var arr = []; 
    var dataSet = []; 
    $(document).ready(function myfunction() { 
     $('#demo').html('<table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%" data-page-length="5"></table>'); 
     table = $('#myTable').DataTable({ 
      scrollY: "700px", 
      scrollX: true, 
      scrollCollapse: true, 
      fixedColumns: false, 
      paging: true, 
      searching: true, 
      ordering: true, 
      info: true, 
      lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]], 
      pageLength: 10, 
      sPaginationType: "full_numbers", 

      //This function is associated with the fnDrawCallback property for DataTable for not displaying Table if no rows are present 
      fnDrawCallback: function (settings) { 
       // $("#myTable").parent().toggle(settings.fnRecordsDisplay() > 0); 
       //$("select[name='myTable_length'] option[value='10']").attr('selected',true); 
      }, 
      columnDefs: [ 
       { width: '10%', targets: 0 }, 
       { 
        "aTargets": 3, 
        "mData": null, 
        "mRender": function (data) { 
         //Adding a button Dynamically to Delete the selected row from the table 
         return "<button class='btn btn-danger' id='btnDelete'>Delete</button>"; 
        } 
       } 
      ], 
      data: dataSet, 
      columns: 
       [ 
        { "title": "SerialNo" }, 
        { "title": "EmployeeFirstName" }, 
        { "title": "EmployeeLastName" }, 
        { "title": "Remove" } 
       ] 
     }); 

     $('#btnAdd').on("click", function() { 
      var SerialNo; 
      //Checks if javascript global array(arr) having value or not 
      if (arr && arr.length > 0) { 
       SerialNo = arr.length + 1; 
      } 
      else { 
       SerialNo = 1; 
      } 
      var EmployeeFirstName = $('#EmployeeFirstName').val(); 
      var EmployeeLastName = $('#EmployeeLastName').val(); 

      var item = {}; 
      item["SerialNo"] = SerialNo; 
      item["EmployeeFirstName"] = EmployeeFirstName; 
      item["EmployeeLastName"] = EmployeeLastName; 
      arr.push(item); 
      //Binding Data to the table 
      table.row.add([item["SerialNo"], item["EmployeeFirstName"], item["EmployeeLastName"]]).draw(); 
      // table.destroy(); 
     }); 

     var table = $('#myTable').DataTable(); 
     $('#myTable tbody').on('click', 'button', function() { 
      var rowdata = table.row($(this).parents('tr')).data(); 
      //Getting the selected row "SerialNo" column value 
      var serialNo = rowdata[0]; 
      //Removing the selected row from the table 
      table.row($(this).parents('tr')).remove().draw(); 
      //Resetting the serial number to the "SerialNo" column 
      table.rows().iterator('row', function (context, index) { 
       //Getting each row of the datatable 
       var idx = this.row(index); 
       //Modifying the index value to be assigned to "SerialNo" column 
       var tempSlNo = Number(index) + 1; 
       //Redrawing the serial no value for the "SerialNo" column 
       table.cell(idx, 0).data(tempSlNo).draw(); 
      });     
     }); 
    }); 
</script> 

Bitte helfen, dies zu erreichen Funktionalität. Vielen Dank.

Answer 1

entfernen data-page-length="5" von Ihnen HTML, so dass es wie unten gezeigt aussieht:

$('#demo').html('<table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%"></table>');