jQuery的數據表顯示條目下拉列表不顯示默認值 - 在Firefox

Question

我使用jQuery的數據表1.10.12和麪臨的問題

顯示屏的jQuery數據表「顯示記錄默認值」下拉 控制。

最初這個表是空的，我將數據綁定到button click上的幾個textboxes的表中。我可以能夠實現剩餘的所有功能（將數據添加到表，排序，過濾...等），但不知道

爲什麼「顯示條目」下拉列表控件的默認值不 出現？

這裏有

雖然頁面加載

沒有在下拉列表中，但默認值可記錄的截圖沒有出現

添加記錄到數據表後 - 還是默認值沒有出現

下面是我的代碼是我迄今實施

//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> 

請幫我實現這個功能。謝謝。如下圖所示，從你的HTML

Answer 1

刪除data-page-length="5"所以它看起來：

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