Datatable not showing drop down after dropdown change
Datatable not showing drop down after dropdown change
shakeelcs
Posts: 2Questions: 1Answers: 0
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
This discussion has been closed.
Answers
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
@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?
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