Datatable not showing drop down after dropdown change

Datatable not showing drop down after dropdown change

shakeelcsshakeelcs Posts: 2Questions: 1Answers: 0
edited February 2021 in Free community support

Hi All, I am using datatable in that , one time calling on page load another time calling after ajax call. Requirement is first time datatable blank, once dropdown change datatable will fill. First time when its page loading its showing dropdown when dropdown changing data loading into datatable but dropdown disappearing . could you help to fix htis issues

<script type="text/javascript">
    var currentInventoryTable;
    var inProgressTable;
    var recentRegistrationTable;
    var rowData;
   
    $(document).ready(function () {


       
        currentInventoryTable = $('#unitsAvailableforRegistrationTable').DataTable(
            {

                responsive: {
                    details: {
                        type: 'details'
                    }
                },
                "dom": "<'row'<'col-md-6'l><'col-md-3'<'#prdLineFilters_UnitAvailableForRegis'>><'col-md-3'f><'col-md-3'<'#exportFilters'>>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
                "orderFixed": [0, 'asc'],
                "rowGroup": {
                    dataSrc: 1,
                    //startClassName: ''
                },


                "oLanguage": {
                    "sEmptyTable": "No data available in table, Please Choose the Correct Product Line"
                },

                buttons: [{
                }],
                "columnDefs": [
                    {
                        "targets": [0], // Product Line
                        "width": "10%",
                        "visible": false
                    },
                    {
                        "targets": [1], // Serail Number
                        "width": "12%",
                    },
                    {
                        "targets": [2], // Model Year
                        "width": "10%",
                        //"visible": false
                    },
                    {
                        "targets": [3], // Model Number
                        "width": "12%",
                    },
                    {
                        "targets": [4], // Model Description
                        "width": "25%",
                    },
                    {
                        "targets": [5], // Shipped Date
                        "width": "13%",
                    },
                    //{
                    //    "targets": [6], // Est. Flooring End
                    //    "width": "10%"
                    //},
                    {
                        "targets": [6], // Invoice Number
                        "width": "13%",
                    },
                    {
                        "targets": [7], // Notes
                        "width": "15%"
                    }
                   
                ],


                "language": {
                    "lengthMenu": "Show _MENU_",
                    "infoFiltered": ""
                },

                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                "pageLength": 100,
                "fixedHeader": true,
                "autoWidth": false,

            });

        $("#prdLineFilters_UnitAvailableForRegis").html($('#product-line-export_unitAvailable'));




    });
    
    
    function dropDownChangeUnitAvilforReg() {
       // debugger;
        var drpSelectVal = $('#drpUnitAvilforRegProdLineSelect option:selected').val();
         $('#searching').removeClass('hidden');

        $.ajax({
            type: "POST",
            url: '@Url.Action("UnitAvilRegProductLineChange", "RegistrationInventory")',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(drpSelectVal),
            dataType: "json",
            success: function (dataProdInv) {
                //console.log(dataProdInv);

                $("#unitsAvailableforRegistrationTable").DataTable(
                    {
                        destroy: true,
                        bLengthChange: true,
                        lengthMenu: [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
                        iDisplayLength: 100,
                        bFilter: true,
                        bSort: true,
                        bPaginate: true,
                        data: dataProdInv,
                       
                        "dom": '<"row"<"col-sm-11"l><"col-md-3"<"#prdLineFilters_UnitAvailableForRegis">><"col-md-3"f><"col-md-3"<"#exportFilters">>><"row"<"col-sm-12"tr>><"row"<"col-sm-5"i><"col-sm-7"p>>',
                       
                        "language": {
                            "emptyTable": "No data available in table, Please Choose the Correct Product Line"
                        },
                        "aoColumnDefs": [{ "bVisible": false, "aTargets": [0] }],
                        columns: [{ 'data': 'productLine' },
                            { 'data': 'registration' },
                            { 'data': 'modelYear' },
                            { 'data': 'modelNumber' },
                            { 'data': 'modelDescription' },                           
                            { 'data': 'shippedDate', 'name': 'Shipped Date', 'render': function (data) { return formatDate(data); } },
                            { 'data': 'invoiceNumber' },
                            { 'data': 'notes' }]
                    });
                $("#prdLineFilters_UnitAvailableForRegis").html($('#product-line-export_unitAvailable'));
                

            },
            error:
                function () { console.log('UnitAvilRegProductLineChange Error '); },
            complete:
                function () {
                    
                    $('#searching').addClass('hidden');
                    

                }
        });



    }

   

</script>
                    <!--Units Available for Registration Place Holder Start -->
                    <div class="current-inventory">
                        <h2 class="page-secondary-header"><span>@Localizer["Units Available for Registration"]</span> </h2>
                    </div>
                    <!-- Product Line Dropdown Start -->
                    <div id="product-line-export_unitAvailable" class="form-group">
                        <div id="product-line-export_UnitAvailableForRegis" class="row">
                            <div class="col-md-2">
                                <Label>
                                    @Localizer["Display:"]
                                </Label>
                                <span>
                                    @Html.DropDownList("drpUnitAvilforRegProdLineSelect", new SelectList(Model.ProductLinesItem, "Value", "Text", Model.SelectedValue), new { Class = "form-control input-sm vehicleSelect", onchange = "dropDownChangeUnitAvilforReg();" })
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- Product Line Dropdown End -->

                    <div id="divAvailableforRegistration" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                        <div id="searching" class="loader hidden"></div>
                        <table id="unitsAvailableforRegistrationTable" class="table table-hover table-bordered table-datatable table-striped">
                            <thead>
                                <tr>
                                    <th style="display:none;" data-priority="2">@Localizer["Product Line"]</th>
                                    <th style="data-priority=" 1">@Localizer["Serial Number"]</th>
                                    <th style="data-priority=" 2">@Localizer["Model Year"]</th>
                                    <th style="data-priority=" 3">@Localizer["Model Number"]</th>
                                    <th style="data-priority=" 3">@Localizer["Model Description"]</th>                                    
                                    <th style="data-priority=" 4">@Localizer["Shipped Date"]</th>
                                    <th style="data-priority=" 2">@Localizer["Invoice Number"]</th>
                                    <th style="data-priority=" 2">@Localizer["Notes"]</th>
                                    @*<th style="width:50px; padding-left:50px;" class="registration"></th>*@

                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

                        <!--Units Available for Registration Place Holder End -->
                    </div>
                </div>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    First time when its page loading its showing dropdown when dropdown changing data loading into datatable but dropdown disappearing . could you help to fix htis issues

    Sounds like the Datatables functionality is working but you are having problems with a custom dropdown element you added. Datatables doesn't control your dropdown element and isn't removing it. There is nothing obvious in your code above. You will need to trace through your code to determine why the dropdown is disappearing.

    Kevin

  • shakeelcsshakeelcs Posts: 2Questions: 1Answers: 0

    @kthorngren thanks a lot, I traced all but nothing i found wrong but still my custom dropdown disappearing when page loading back. Can i get your some time to show my issues live?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.