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