jQuery DataTable显示条目下拉列表未显示默认值-在Firefox中 [英] jQuery DataTable Show entries dropdown is not displaying default value - In Firefox

问题描述

我正在使用 Jquery DataTables 1.10.12 ，并面临

显示Jquery数据表显示条目"下拉菜单的默认值 控制.

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

表最初是空的，我将数据从button click上的几个textboxes绑定到表.我可以实现剩余的所有功能(将数据添加到表，进行排序，过滤等)，但不知道

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 ?

这是屏幕截图

页面已加载

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

将记录添加到数据表后-仍未显示默认值

下面是我到目前为止已实现的代码

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.

推荐答案

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

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>');

这篇关于jQuery DataTable显示条目下拉列表未显示默认值-在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！