我正在使用数据表，一次在页面加载上调用，另一次在 ajax 调用后调用。要求是第一次数据表空白，一旦下拉更改数据表将填充。第一次当它的页面加载它的显示下拉列表时，下拉更改数据加载到数据表但下拉消失。你能帮忙解决这个问题吗
'''
<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>
'''