javascript – How To Filter and Search the Selected value in Dropdown in Datatables using Jquery in MVC5

I Want to get the data in the DropDownList and to Show in the datatable i’m not getting the desired one

    <div class="card-header d-flex align-items-center">
        <h4>Web API Logs</h4>
        <div class="col-sm-4">
        </div>
    </div>
    <div class="card-header">
        <form action="" id="searchForm" name="searchForm">
            <div class="row">
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="txtFromDate" class="col-sm-12 control-label">From Date</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input id="txtFromDate" name="txtFromDate" type="text" class="form-control date-input" readonly="readonly" />
                                <label class="input-group-btn" for="txtFromDate">
                                    <span class="btn btn-default">
                                        <span class="fa fa-calendar"></span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="txtToDate" class="col-sm-12 control-label">To Date</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input id="txtToDate" name="txtToDate" type="text" class="form-control date-input" readonly="readonly" />
                                <label class="input-group-btn" for="txtToDate">
                                    <span class="btn btn-default">
                                        <span class="fa fa-calendar"></span>
                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="type" class="col-sm-12 control-label">Type</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <select id="type" name="txttype" class="form-control dropdown" style="height:33px" tabindex="17">
                                    <option value=""></option>
                                    <option value="">All</option>
                                    <option value="offers">Offers</option>
                                    <option value="Subs">Subscribers</option>
                                    <option value="login">Login</option>
                                </select>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="status" class="col-sm-12 control-label">Status</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <select id="status" name="status" class="form-control dropdown " style="height:33px" tabindex="17">
                                    <option value=""></option>
                                    <option value="">All</option>
                                    <option value="ss">Success</option>
                                    <option value="cust">Customer  failed</option>
                                    <option value="fle">Failed</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            
            <div class="col-md-2" style="margin-top: 6px">
                <input type="submit" class="btn btn-primary mt-4" id="btnSearch" value="Search" />
                
                @*<span class="btn btn-success mt-4"></span>*@
              </div>
</div>
        </form>

    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-12">
                <table id="logviewgrid" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%"></table>
            </div>
        </div>
    </div>
</div>
<div id="loading" style="display: none">
    <p class="div_processing">Processing..</p>
</div>

This is the View in that Action And Status Fields Are the DropDownlist From that list i want to search and Fetch Values ​​Based on That

This the Jquery Ajax Function for Type Dropdown

 $.ajax({
                type: 'GET',
                url: '@Url.Action("Actionurl")',
                dataType: 'json',
                data: { id: $("#txttype").val() },
                success: function (datas, status) {
                    var duplicate = [];

                    $("#txttype").append('<option value="' + "" + '">' + " " + '</option>');

                    $.each(datas, function (i, data) {
                        if (duplicate.indexOf(data.fld_type) == -1) {
                            $("#txttype").append('<option value="' + data.fld_type+ '">' + data.fld_type+ '</option>');

                            duplicate.push(data.fld_type);
                        }

                    });
                }

            });

This the Jquery Ajax Function for Status Dropdown

 $.ajax({
                type: 'GET',
                url: '@Url.Action("Actionurl")',
                dataType: 'json',
                data: { id: $("#status").val() },
                success: function (datas, status) {
                    var duplicate = [];

                    $("#status").append('<option value="' + "" + '">' + " " + '</option>');

                    $.each(datas, function (i, data) {
                        if (duplicate.indexOf(data.fld_status) == -1) {
                            var code = data.fld_status.split('CC-');
                            $("#status").append('<option value="' + code + '">' + data.fld_status+ '</option>');

                            duplicate.push(data.fld_status);
                        }

                    });
                }

            });

This Is the DataTable And Search Ajax Jquery Function

 $('#logviewgrid td').css('white-space', ' ');



             $("#searchForm").validate({
                errorClass: "error-class",
                validClass: "valid-class",
                errorElement: 'div',
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                onError: function () {
                    $('.input-group.error-class').find('.help-block.form-error').each(function () {
                        $(this).closest('.form-group').addClass('error-class').append($(this));
                    });
                },
                rules: {
                    txtFromDate: "required",
                    txtToDate: "required"
                },
                messages: {
                    txtFromDate: "From Date Is Required",
                    txtToDate: "To Date Is Required"

                },
                 submitHandler: function (form) {
                     $('#loading').show();

                    $.ajax({
                        url: '@Url.Action("SearchWebApiLog", "Report")',
                        type: 'GET',
                        data: {
                            fldFromDate: moment($('#txtFromDate').val(), 'DD/MM/YYYY').toISOString(),
                            fldToDate: moment($('#txtToDate').val(), 'DD/MM/YYYY').add(1, 'days').toISOString(),
                            fld_type: $('#txttype').val().toString(),
                            fld_status: $('#status').val().toString(),
                            //cause: $('#txtcause').val().toString(),
                            //servicetype: $('#txtservice').val().toString(),
                            //custid: $('#txtcustid').val().toString()
                        },
                        error: function () {
                            $('#loading').hide();
                            var notify = $.notify('<strong>Error</strong> An error has occurred. Contact administrator.!', {
                                allow_dismiss: true,
                                type: 'danger'
                            });
                            return false;
                        },
                        success: function (data, status) {
                            if (status == 'success') {

                                //if (data.status = "") {

                                //}

                                table.clear().draw();
                                //table.rows.add(eval('(' + data + ')')); // Add new data
                                table.rows.add(data);
                                // Redraw the DataTable
                                table.columns.apply().draw();
                                $('#loading').hide();
                            } else {
                                $('#loading').hide();
                                var notify = $.notify('<strong>Warning</strong> Error for reading online count details. Please contact administrator.!', {
                                    allow_dismiss: true,
                                    type: 'warning'
                                });
                                return false;
                            }

                            return false;
                        }

                    });
                    return false;

                 }
            })

Leave a Comment