I am currently populating data into a jQuery datatable dynamically with the help of AJAX. Each row in the table contains a dropdown selectpicker from Bootstrap, displayed as follows:
https://i.sstatic.net/g0czE.png
However, I am experiencing issues with the UI when I select an option from the dropdown, as shown below:
https://i.sstatic.net/c5Ur3.png
I have made multiple attempts to resolve this issue without success. Below is a snippet of the code I am working with:
HTML
<table id="tbl_BankData" class="table table-striped table-bordered nowrap" cellspacing="0" style="width: 100%">
<thead class="table table-striped table-bordered" style="background-color :#4b5d67; color:white; width:100px">
<tr>
<th class="clsLoanTh"><input type='checkbox' onclick="toggle(this)" id="SelectAll" /></th>
<th>Sno</th>
<th>Date</th>
<th>Transaction Id</th>
<th>Narration</th>
<th>Amount</th>
<th>Collection Type</th>
<th>Loan</th>
<th>Customer Name</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
Script
$.ajax({
url: '@Url.Action("Action", "Controller")',
data: '{tranDate: "' + tranDate + '",bankCode: "' + bankCode + '",status: "' + status + '",input: "' + input + '"}',
datatype: "json",
contentType: "application/json; charset-utf-8",
type: 'POST',
success: function (response) {
// Code for displaying a message goes here
// DataTable manipulation and population logic
});
I have exhausted various strategies in an attempt to rectify the issue with no success. Any assistance or guidance on fixing this problem would be greatly appreciated.
Thank you in advance for your help!