jQuery DataTable Show entries dropdown is not displaying default value - In Firefox

问题

I am using Jquery DataTables 1.10.12 and facing problem to

display the default value for Jquery Datatable "Show Entries" dropdown control.

Initially the table is empty and i am binding data to the table from few textboxes on a button click. I can able to achieve remaining all functionalities (adding data to the table, sorting,filtering...etc) but don't know

why the default value for "Show Entries" dropdown control is not appearing ?

Here are the screenshots

While page loaded

No of records available in dropdown but default value is not appearing

After adding records to the datatable - still default value is not appearing

Below is my code what i have implemented so far

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

Please help me to achieve this functionality. Thank you.

回答1:

Remove data-page-length="5" from you HTML so it looks like shown below:

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

来源：https://stackoverflow.com/questions/39130969/jquery-datatable-show-entries-dropdown-is-not-displaying-default-value-in-fire