jQuery DataTable 显示条目下拉菜单不显示默认值 - 在 Firefox 中

Question

我正在使用 Jquery DataTables 1.10.12 并遇到问题

显示 Jquery 数据表“显示条目”下拉菜单的默认值 控制。

最初表格是空的，我将数据从textboxes 上的button click 绑定到表格。我可以实现剩余的所有功能（向表中添加数据、排序、过滤...等）但不知道

为什么“显示条目”下拉控件的默认值不是 出现了吗？

这里是截图

页面加载时

下拉列表中没有可用记录，但未显示默认值

向数据表添加记录后 - 仍然没有出现默认值

下面是我目前实现的代码

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

请帮我实现这个功能。谢谢。

Answer 1

从您的 HTML 中删除 data-page-length="5"，使其如下所示：

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