your approach seems wrong. you should be using javascript sourced data:
https://datatables.net/examples/data_sources/js_array.html
and column render functions:
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
I'm very new to this DataTable logic implementation concept and I have append the data to the DataTable and append successfully and in that DataTable controls I have written some event logic (ex:- dropdown onchange
and textbox oninput
events) and those events are firing successfully and values are changing on other controls as well
HTML Logic:-
<asp:Button ID="sb_add" runat="server" OnClientClick="SB_Add_Legs(event); return false;" Text="+ ADD"CssClass="btn btn-primary w-100 w-md-auto text-center px-4 spinbutton" />
<table class="table table-borderless rowSpace table-round-row dtr-inline SB_table dataTable "
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>
jQuery Add
button entire logic:-
function SB_Add_Legs(e) {
e.preventDefault();
var d_stg = '';
var s_leg_data = "";
var b_selected = '';
var s_selected = '';
var ddl_expdate = "";
var ddl_strike = "";
var ddl_inst = "";
var lnt = $("#strastrategy_builder_datatable .aliceBlueRow").length;
if (lnt > 0 && $("#hdn_sb_refresh_sh").val() === '1')
$("#blurid").addClass("blur5"), $("#sb_refresh").show();
if (lnt < 10) {
var s = 'nifty;
var s_bs = 'buy';
var s_inst = 'ce';
var s_stk = '12345';
var s_ex = '30-07-1995';
var s_q = '25;
var drpInstrumentValue = 'ce';
var d_exp = '02-07-1990';
var d_stk = s_stk;
var ddl_bs = `<option value="Buy" ${s_bs.toLowerCase() === 'buy' ? "selected" : ""}>BUY</option>
<option value="Sell" ${s_bs.toLowerCase() === 'sell' ? "selected" : ""}>SELL</option>`;
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>`;
ddl_expdate = `<option value="2024-07-25">2024-07-25</options>
<option value="2024-07-26">2024-07-26</options>
<option value="2024-07-27">2024-07-27</options>`;
ddl_strike = `<option value="24550">24550</options>
<option value="24560">24560</options>
<option value="24570">24570</options>`;
var FuturePrice = '24534';
var Price = '224.50';
var Delta = '0.4938';
var Gamma = '0.0007';
var Theta = '-19.3594';
var Vega = '12.5474';
var IV = '18.51';
SB_Generate_Legs_Added_HTML(ddl_bs, ddl_inst, ddl_expdate,
ddl_strike, s_q, FuturePrice, Price, Delta, Gamma,
Theta, Vega, IV);
}
else {
$("#perrormsg").html('');
$("#perrormsg").html('You can add only a maximum of 10 rows');
$("#modelpopupmsg").modal("show");
}
return false;
}
function SB_Generate_Legs_Added_HTML(ddl_bs, inst, ddl_expdate, ddl_strike, Qty, FuturePrice, Price, Delta, Gamma, Theta, Vega, IV) {
var d_qty = $("#hdn_sb_lotsize").val();
var s_inst = $("#sb_instrument").val();
$("#strastrategy_builder_datatable").DataTable().destroy();
var table = $('#strastrategy_builder_datatable').DataTable({});
var action = ` <div class="d-inline-block ">
<select class="form-select border-0 analyserfields whiteBG" style="min-width: 80px;" name="sbaction" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_bs}
</select>
</div>`;
var ddl_i = ` <select class="form-select border-0 analyserfields whiteBG" style="min-width: 80px;" name="sbinst" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${inst}
</select>`;
var ddl_e = ` <select class="form-select border-0 analyserfields whiteBG ${s_inst === 'EQ' ? 'textDisable' : ''}" style="min-width: 130px;" ${s_inst === 'EQ' ? 'disabled' : ''} name="sbexp" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_expdate}
</select>`;
var ddl_s = ` <select class="form-select border-0 analyserfields whiteBG ${s_inst === 'FUT' || s_inst === 'EQ' ? 'textDisable' : ''}" style="min-width: 100px;" ${s_inst === 'FUT' || s_inst === 'EQ' ? 'disabled' : ''} name="sbstrike" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_strike}
</select>`;
var q = ` <div class="input-group flex-nowrap v-line pe-2">
<span class="input-group-text border-0 px-1"><i class="bi bi-dash textDanger pointer" onclick="SB_Legs_Added_table_minqty(${d_qty},this);"></i></span>
<input type="text" class="form-control text-center border-0 analyserfields whiteBG" name="sbqty" value=${Qty} autocomplete="off"
style="min-width: 70px;" maxlength='6' onblur="SB_Add_Leg_QtyValue(this);" oninput="SB_calculateqtylivenetprem('qty',this);"/>
<span class="input-group-text border-0 px-1"><i class="bi bi-plus textSuccess pointer" onclick="SB_Legs_Added_table_maxqty(${d_qty},this);"></i></span>
</div>`;
var f = ` <input type="text" class="form-control border-0 analyserfields whiteBG" name="sbfprice" maxlength="9" style="min-width: 90px;" value=${FuturePrice}
autocomplete="off" oninput="SB_Legs_Added_table_val_change('futprice',this);"/>`;
var p = `<input type="text" class="form-control border-0 analyserfields whiteBG" name="sbprice" style="min-width: 90px;" maxlength="9" value=${Price}
autocomplete="off" oninput="SB_Legs_Added_table_val_change('price',this);"/>`;
var d = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 90px;" maxlength="7" name="sbdelta"
value=${Delta} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var g = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 90px;" maxlength="7" name="sbgamma"
value=${Gamma} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var t = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 100px;" maxlength="7" name="sbtheta"
value=${Theta} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var v = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 100px;" maxlength="7" name="sbvega"
value=${Vega} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var iv = ` <input type="text" class="form-control border-0 analyserfields whiteBG" name="sbiv" style="min-width: 100px;" maxlength="6" autocomplete="off"
value=${IV} oninput="SB_Legs_Added_table_val_change('iv',this);" />`;
var dlt = `<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>`;
table.row
.add([
action,
ddl_i,
ddl_e,
ddl_s,
q,
f,
p,
d,
g,
t,
v,
iv,
dlt,
])
.draw(false);
$("#strastrategy_builder_datatable").DataTable().destroy();
$("#strastrategy_builder_datatable").DataTable({
ordering: false,
info: false,
paging: false,
searching: false,
responsive: true,
language: {
emptyTable: " ",
},
columnDefs: [
{
responsivePriority: 1, //column view
targets: 0 //column name
},
{
responsivePriority: 2,
targets: 1
},
{
responsivePriority: 4,
targets: 2
},
{
responsivePriority: 5,
targets: 3
},
{
responsivePriority: 7,
targets: 4
},
{
responsivePriority: 6,
targets: 11
},
{
className: 'dt-center', // delete icon response column position 3
width: '50px',
responsivePriority: 3,
targets: -1
},
],
createdRow: function (row, data, dataIndex) {
$(row).addClass('aliceBlueRow');
}
});
}
Here is my Img examples are :-
Initially if I click on the Add button row is appending to the DataTable
And I clicked on the DataTable dropdown icon
The Theta and Vega
values are showing like -19.3594
and 12.5474
And I enter some value on the IV
column 845
and dependent columns values will change ex:- Theta and Vega
columns values are changed
And if I click on the same dropdown of DataTable icon the previous values are coming instead on new values on the Theta and Vega
In this img the IV
values845
didn't change but the Theta
and Vega
values are changed
EDITED
function SB_Legs_Added_table_val_change(type, tt) {
console.log("type :- " + type);
var s, e, st, i, bs, t, fp, p = "";
var sb_l = '';
t = $(tt).closest(".aliceBlueRow");
s = $("#sb_smbl_srch").val();
if (type === 'iv' || type === 'futprice' || type === 'price') {
var value = tt.value;
console.log("value :- " + value);
//alert(value);
value = value.replace(/[^0-9.]/g, '');
//alert(value);
var parts = value.split('.');
//alert(parts);
if (parts.length > 1) {
value = parts[0] + '.' + parts[1].slice(0, 2);
}
tt.value = value;
//alert($.isNumeric(value));
if (!$.isNumeric(value))
return false;
//return;
console.log("nmbr ?");
console.log("value :-" + value);
//parent row logic
let parentRow = $(tt).closest('tr.dt-hasChild');
let childRow = parentRow.nextAll('tr.child').first();
console.log(childRow.length + " parent : value enter row " + parentRow.length);
//child row logic
let childRow_1 = $(tt).closest('tr.child');
let parentRow_1 = childRow_1.prevAll('tr.dt-hasChild').first();
console.log(childRow_1.length + "child : value enter row " + parentRow_1.length);
//let sbinstValue = '';
//let sbfpriceValue = '';
//let sbvegaValue = '';
if (parentRow.length && childRow.length && (type === 'iv' || type === 'futprice' || type === 'price')) {
console.log("Parent row found.");
if (childRow.find('.analyserfields[name="sbexp"]').length > 0)
e = childRow.find('.analyserfields[name="sbexp"]').val();
else
e = parentRow.find('.analyserfields[name="sbexp"]').val();
if (childRow.find('.analyserfields[name="sbstrike"]').length > 0)
st = childRow.find('.analyserfields[name="sbstrike"]').val();
else
st = parentRow.find('.analyserfields[name="sbstrike"]').val();
if (childRow.find('.analyserfields[name="sbinst"]').length > 0)
i = childRow.find('.analyserfields[name="sbinst"]').val();
else
i = parentRow.find('.analyserfields[name="sbinst"]').val();
if (childRow.find('.analyserfields[name="sbaction"]').length > 0)
bs = childRow.find('.analyserfields[name="sbaction"]').val();
else
bs = parentRow.find('.analyserfields[name="sbaction"]').val();
if (type === 'iv') {
if (childRow.find('.analyserfields[name="sbfprice"]').length > 0)
fp = childRow.find('.analyserfields[name="sbfprice"]').val();
else
fp = parentRow.find('.analyserfields[name="sbfprice"]').val();
//fp = $(t).find(".analyserfields[name=sbfprice]").val();
console.log("iv data :-" + s + " : " + e + " : " + st + " : " + i + " : " + bs + " : " + value + " : " + fp);
sb_l = LTPFromIV_AJAXCall(s, e, st, i, bs, value, fp);
}
else if (type === 'futprice') {
if (childRow.find('.analyserfields[name="sbprice"]').length > 0)
p = childRow.find('.analyserfields[name="sbprice"]').val();
else
p = parentRow.find('.analyserfields[name="sbprice"]').val();
//p = $(t).find(".analyserfields[name=sbprice]").val(); //fp = $(t).find(".analyserfields[name=sbfprice]").val();
console.log("fprice data :-" + s + " : " + e + " : " + st + " : " + i + " : " + bs + " : " + p + " : " + value);
sb_l = LTPFromPrice_FuturePrice_AJAXCall(s, e, st, i, bs, p, value);
}
else if (type === 'price') {
if (childRow.find('.analyserfields[name="sbfprice"]').length > 0)
fp = childRow.find('.analyserfields[name="sbfprice"]').val();
else
fp = parentRow.find('.analyserfields[name="sbfprice"]').val();
//fp = $(t).find(".analyserfields[name=sbfprice]").val();
console.log("price data :-" + s + " : " + e + " : " + st + " : " + i + " : " + bs + " : " + value + " : " + fp);
sb_l = LTPFromPrice_FuturePrice_AJAXCall(s, e, st, i, bs, value, fp);
}
console.log("type type paresnt :-" + type);
console.log("sb_l :- " + sb_l);
console.log(sb_l);
if (sb_l && sb_l.length > 0) {
if (type != 'futprice') {
//t.find(".analyserfields[name=sbfprice]").val(sb_l[0].FuturePrice);
if (childRow.find('.analyserfields[name="sbfprice"]').length > 0)
childRow.find('.analyserfields[name="sbfprice"]').val(sb_l[0].FuturePrice);
else
parentRow.find('.analyserfields[name="sbfprice"]').val(sb_l[0].FuturePrice);
}
if (type != 'price') {
//t.find(".analyserfields[name=sbprice]").val(sb_l[0].Price);
if (childRow.find('.analyserfields[name="sbprice"]').length > 0)
childRow.find('.analyserfields[name="sbprice"]').val(sb_l[0].Price);
else
parentRow.find('.analyserfields[name="sbprice"]').val(sb_l[0].Price);
}
//t.find(".analyserfields[name=sbdelta]").val(sb_l[0].Delta);
if (childRow.find('.analyserfields[name="sbdelta"]').length > 0)
childRow.find('.analyserfields[name="sbdelta"]').val(sb_l[0].Delta);
else
parentRow.find('.analyserfields[name="sbdelta"]').val(sb_l[0].Delta);
//t.find(".analyserfields[name=sbgamma]").val(sb_l[0].Gamma);
if (childRow.find('.analyserfields[name="sbgamma"]').length > 0)
childRow.find('.analyserfields[name="sbgamma"]').val(sb_l[0].Gamma);
else
parentRow.find('.analyserfields[name="sbgamma"]').val(sb_l[0].Gamma);
//t.find(".analyserfields[name=sbtheta]").val(sb_l[0].Theta);
if (childRow.find('.analyserfields[name="sbtheta"]').length > 0)
childRow.find('.analyserfields[name="sbtheta"]').val(sb_l[0].Theta);
else
parentRow.find('.analyserfields[name="sbtheta"]').val(sb_l[0].Theta);
//t.find(".analyserfields[name=sbvega]").val(sb_l[0].Vega);
if (childRow.find('.analyserfields[name="sbvega"]').length > 0)
childRow.find('.analyserfields[name="sbvega"]').val(sb_l[0].Vega);
else
parentRow.find('.analyserfields[name="sbvega"]').val(sb_l[0].Vega);
if (type != 'iv') {
//t.find(".analyserfields[name=sbiv]").val(sb_l[0].IV);
if (childRow.find('.analyserfields[name="sbiv"]').length > 0)
childRow.find('.analyserfields[name="sbiv"]').val(sb_l[0].IV);
else
parentRow.find('.analyserfields[name="sbiv"]').val(sb_l[0].IV);
}
SB_CalculateNetPremium();
if ($("#hdn_sb_refresh_sh").val() === '1')
$("#blurid").addClass("blur5"), $("#sb_refresh").show();
}
}
}
}
Suggest me how to achieve this and why those values are changing and values should not change until any event should fire.
I'm not sure I explained correctly hope you understood my problem.
Can you please suggest me DataTable is recommended or not in this scenario (logic implementation).
Sorry for my bad English.
your approach seems wrong. you should be using javascript sourced data:
https://datatables.net/examples/data_sources/js_array.html
and column render functions: