I have created a datatable and appending the data to that datatable body , data appending successfully but the datatable not working properly
ex:- If I click on the datatable header columns the entire table data is erasing.
Here is my full logic
Asp.net code:-
<asp:Button ID="sb_add" runat="server" OnClientClick="return SB_Add_Legs(event);" Text="+ ADD" CssClass="btn btn-primary w-100 w-md-auto text-center px-4" />
<table class="table table-borderless rowSpace table-round-row dtr-inline SB_table dataTable nowrap "
id="strastrategy_builder_datatable" style="width: 100%;">
<thead>
<tr>
<th>Action</th>
<th>Instrument</th>
<th>Expiry</th>
<th>Strike</th>
<th>Qty</th>
<th>Future Price</th>
<th>Price</th>
<th>Delta</th>
<th>Gamma</th>
<th>Theta</th>
<th>Vega</th>
<th>IV</th>
<th data-dt-order="disable"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="sbnolegs">NO LEGS ADDED</div>
Datatable logic :-
$("#strastrategy_builder_datatable").find("th").off("click.DT");
$('#strastrategy_builder_datatable').DataTable({
ordering: false,
info: false,
paging: false,
searching: false,
responsive: true,
language: {
emptyTable: ' ',
},
columnDefs: [
{
width: '100px',
responsivePriority: 1,
targets: 0
},
{
className: 'dt-center',
width: '50px',
responsivePriority: 2,
targets: -1
},
{
width: '110px',
// responsivePriority: 3,
targets: -2
},
{
width: '110px',
responsivePriority: 4,
targets: -3
},
{
width: '110px',
responsivePriority: 5,
targets: -4
},
{
width: '110px',
responsivePriority: 6,
targets: -5
},
{
width: '110px',
responsivePriority: 7,
targets: -6
},
{
width: '100px',
responsivePriority: 8,
targets: -7
},
{
width: '100px',
responsivePriority: 9,
targets: -8
},
{
width: '120px',
responsivePriority: 10,
targets: -9
},
{
width: '120px',
// responsivePriority: 10,
targets: -10
},
{
width: '160px',
// responsivePriority: 10,
targets: -11
},
{
width: '100px',
// responsivePriority: 10,
targets: -12
}
]
});
Add button logic function :-
function SB_Add_Legs(e) {
e.preventDefault();
//console.log("data :- " + data);
var d_stg = '';
var s_leg_data = "";
var b_selected = '';
var s_selected = '';
var ddl_expdate = "";
var ddl_strike = "";
//$("#strastrategy_builder_datatable").removeClass('hidden');
var lnt = $("#strastrategy_builder_datatable .aliceBlueRow").length;
//if (lnt === 1)
if (lnt < 10) {
var s = $("#sb_smbl_srch").val(); // textbox val
var s_bs = $("#sb_buysell").val(); // dropdown val
var s_inst = $("#sb_instrument").val(); // dropdown val
var s_stk = $("#sb_strikeprice").val(); // dropdown val
var s_ex = $("#sb_expdate").val(); // dropdown val
var s_q = $("#sb_qty").val(); // textbox val
d_stg = LTP_AJAXCall(s, s_ex, s_stk, s_inst, s_bs);
console.log(d_stg);
/*[
{
"Price": "137.45",
"Delta": "0.5085",
"Gamma": "0.0012",
"Theta": "-24.5206",
"Vega": "8.1152",
"IV": "16.64",
"OI": "1637425.00",
"OIChg": "835625.00",
"FuturePrice": "22559",
"StrikeType": "ATM",
"LotSize": "25"
}
]*/
//SB_Legs_Added_Load("add", d_stg);
//$("#strastrategy_builder_datatable tbody").empty();
if (d_stg && d_stg.length > 0) {
$.each(d_stg, function (index, rowData) {
ddl_expdate = "";
ddl_strike = "";
if (s_bs.toLowerCase() === 'buy') b_selected = 'selected', s_selected = ''; else b_selected = '', s_selected = 'selected';
var drpInstrumentValue = s_inst.toUpperCase();
var d_exp = s_ex;
var d_stk = s_stk;
var ddl_inst = `
<option value="CE" ${drpInstrumentValue === "CE" ? "selected" : ""}>CE</option>
<option value="PE" ${drpInstrumentValue === "PE" ? "selected" : ""}>PE</option>
<option value="FUT" ${drpInstrumentValue === "FUT" ? "selected" : ""}>FUT</option>
<option value="EQ" ${drpInstrumentValue === "EQ" ? "selected" : ""}>EQ</option>
`;
var e_date = ExpDates_AJAXCall(s, drpInstrumentValue);
if (e_date && e_date.length > 0) {
for (var i = 0; i < e_date.length; i++)
if (d_exp == e_date[i].ExpDate)
ddl_expdate += `<option selected value="${e_date[i].ExpDate}">${e_date[i].ExpDate}</options>`;
else
ddl_expdate += `<option value="${e_date[i].ExpDate}">${e_date[i].ExpDate}</options>`;
}
var stk = Strikes_AJAXCall(s, drpInstrumentValue, d_exp);
if (stk && stk.length > 0) {
for (var i = 0; i < stk.length; i++)
if (d_stk == stk[i].StrikePrice)
ddl_strike += `<option selected value="${stk[i].StrikePrice}">${stk[i].StrikePrice}</options>`;
else
ddl_strike += `<option value="${stk[i].StrikePrice}">${stk[i].StrikePrice}</options>`;
}
s_leg_data += SB_Generate_Legs_Added_HTML(b_selected, s_selected, ddl_inst, ddl_expdate,
ddl_strike, s_q, rowData.FuturePrice, rowData.Price, rowData.Delta, rowData.Gamma, rowData.Theta, rowData.Vega, rowData.IV);;
});
$(".sbnolegs").hide();
$("#sb_groupbtns, #sb_netpremium_spread").show();
$("#strastrategy_builder_datatable tbody").append(s_leg_data);
SB_CalculateNetPremium();
}
}
else {
$("#perrormsg").html('');
$("#perrormsg").html('You can add only a maximum of 10 rows');
$("#modelpopupmsg").modal("show");
}
//return false;
}
And the html code return function is:-
function SB_Generate_Legs_Added_HTML(b_selected, s_selected, inst, ddl_expdate, ddl_strike, Qty, FuturePrice, Price, Delta, Gamma, Theta, Vega, IV) {
return `<tr class="aliceBlueRow">
<td>
<div class="d-inline-block ">
<select class="form-select border-0 analyserfields" name="sbaction" onchange="SB_Legs_Added_table_val_change('ddl',this);">
<option value="Buy" ${b_selected}>BUY</option>
<option value="Sell" ${s_selected}>Sell</option>
</select>
</div>
</td>
<td>
<select class="form-select border-0 analyserfields" name="sbinst" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${inst}
</select>
</td>
<td>
<select class="form-select border-0 analyserfields" name="sbexp" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_expdate}
</select>
</td>
<td>
<select class="form-select border-0 analyserfields" name="sbstrike" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_strike}
</select>
</td>
<td>
<div class="input-group flex-nowrap v-line pe-3">
<span class="input-group-text border-0"><i class="bi bi-dash textDanger pointer" onclick="SB_Legs_Added_table_minqty(${Qty},this);"></i></span>
<input type="text" class="form-control text-center border-0 analyserfields" name="sbqty" value=${Qty} autocomplete="off"
style="min-width: 40px; max-width: 80px" maxlength='6' onblur="SB_Add_Leg_QtyValue(this);" oninput="SB_calculateqtylivenetprem('qty',this);"/>
<span class="input-group-text border-0"><i class="bi bi-plus textSuccess pointer" onclick="SB_Legs_Added_table_maxqty(${Qty},this);"></i></span>
</div>
</td>
<td>
<input type="text" class="form-control border-0 analyserfields" name="sbfprice" value=${FuturePrice}
autocomplete="off" oninput="SB_Legs_Added_table_val_change('futprice',this);"/>
</td>
<td>
<input type="text" class="form-control border-0 analyserfields" name="sbprice" value=${Price}
autocomplete="off" oninput="SB_Legs_Added_table_val_change('price',this);"/>
</td>
<td>
<input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields" name="sbdelta"
value=${Delta} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>
</td>
<td>
<input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields" name="sbgamma"
value=${Gamma} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>
</td>
<td>
<input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields" name="svtheta"
value=${Theta} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>
</td>
<td>
<input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields" name="sbvega"
value=${Vega} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>
</td>
<td>
<input type="text" class="form-control border-0 analyserfields" name="sbiv" autocomplete="off"
value=${IV} oninput="SB_Legs_Added_table_val_change('iv',this);" />
</td>
<td>
<a href="javascript://" class="px-2 py-1 fs-6 analyserfields" name="sbdelete" onclick="SB_DeleteLegs(event,this)">
<i class="bx bxs-trash-alt text-danger"></i>
</a>
</td>
</tr>`;
}
Note:- My concept is if I click on the add button the function return SB_Generate_Legs_Added_HTML html code should append to datatable strastrategy_builder_datatable and the data is appending but if I click on the header columns the entire table data is erasing.
Suggest me where I did the mistake and how to achieve this concept.