Según la documentación y el escenario no se puede solucionar directamente como lo sugiera la documentación con el uso de:
cell($dstktxt).data(nexttxt).draw();
hay que recurrir a la detección de la tabla y el método table()
;
document.addEventListener("DOMContentLoaded", function () {
var tables = $('.mytable').DataTable({
//"dom": '<"html5buttons"B>rt<"bottom"><"clear">',
"iDisplayLength": -1,
"lengthMenu": [
[-1],
["All"]
],
"scrollX": true,
"scrollY": "300px",
"scrollCollapse": true,
"ordering": false,
"paging": false,
fixedColumns:
{
leftColumns: 2
}
});
$(document).off('click.plg', '#test-btn');
$(document).unbind('click.plg', '#test-btn');
$(document).on('click.plg', '#test-btn', (e) => {
console.log(e.target);
let $dstktxt = $('.dstktxt_0277'); //specific td
let diasinv = 100; //value for test purpose
if (diasinv > 0)
{
nexttxt = ' new <span class="text-danger">(Si hay Stock)';
}
else
{
nexttxt = ' new <span class="text-danger">(No hay Stock)';
}
$dstktxt.html(nexttxt);
var table = $(e.target).closest('table');
tables.table( table ).cell($dstktxt).data(nexttxt).draw();
tables.table( table ).columns.adjust();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.3.1/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/datatables.min.css"/>
</head>
<body>
<h1>Example datatable.net</h1>
<div class="col-lg-6">
<table class="mytable table table-striped table-bordered table-hover t-left nowrap">
<thead>
<tr>
<th>Letra A</th>
<th>Letra B</th>
<th>Letra C</th>
<th>Letra D</th>
<th>Letra E</th>
<th>Letra F</th>
<th>Letra G</th>
<th>Letra H</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato A1</td>
<td>check This</td>
<td>
<button type="button" class="btn btn-primary" id="test-btn">Testing Click</button>
</td>
<td class="dstktxt_0277">
test
</td>
<td>
<input type="text" name="i_text_33" placeholder="texto" class="form-control t-input t-input-hlg" data-i-name="Nombre del Campo (Texto)" data-charlimit="5">
</td>
<td>
<div class="i-checks">
<label>
<input type="hidden" value="false" name="checkbox33">
<input type="checkbox" value="true" name="checkbox33"><i></i>
</label>
</div>
</td>
<td>
<div class="input-group bootstrap-datepicker date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" name="i_date_1" data-i-name="Nombre del Campo (Fecha)">
</div>
</td>
<td>
<input type="hidden" name="b" value="radio-chk-dis">1084
</td>
<td>
<div class="input-group bootstrap-timepicker time">
<span class="input-group-addon"><i class="far fa-clock"></i></span><input type="text" class="form-control" name="i_time_1" value="" data-i-name="Nombre del Campo (Fecha)">
</div>
</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tbody>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.3.1/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function () {
$('.mytable').DataTable({
//"dom": '<"html5buttons"B>rt<"bottom"><"clear">',
"iDisplayLength": -1,
"lengthMenu": [
[-1],
["All"]
],
"scrollX": true,
"scrollY": "300px",
"scrollCollapse": true,
"ordering": false,
"paging": false,
fixedColumns:
{
leftColumns: 2
}
});
$(document).off('click.plg', '#test-btn');
$(document).unbind('click.plg', '#test-btn');
$(document).on('click.plg', '#test-btn', (e) => {
console.log(e.target);
let $dstktxt = $('.dstktxt_0277'); //specific td
let diasinv = 100; //value for test purpose
if (diasinv > 0)
{
nexttxt = ' new <span class="text-danger">(Si hay Stock)';
}
else
{
nexttxt = ' new <span class="text-danger">(No hay Stock)';
}
$dstktxt.html(nexttxt);
$('.mytable').DataTable().draw();
$('.mytable').DataTable().columns.adjust();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.3.1/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/datatables.min.css"/>
</head>
<body>
<h1>Example datatable.net</h1>
<div class="col-lg-6">
<table class="mytable table table-striped table-bordered table-hover t-left nowrap">
<thead>
<tr>
<th>Letra A</th>
<th>Letra B</th>
<th>Letra C</th>
<th>Letra D</th>
<th>Letra E</th>
<th>Letra F</th>
<th>Letra G</th>
<th>Letra H</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
<th>Letra I</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato A1</td>
<td>check This</td>
<td>
<button type="button" class="btn btn-primary" id="test-btn">Testing Click</button>
</td>
<td class="dstktxt_0277">
test
</td>
<td>
<input type="text" name="i_text_33" placeholder="texto" class="form-control t-input t-input-hlg" data-i-name="Nombre del Campo (Texto)" data-charlimit="5">
</td>
<td>
<div class="i-checks">
<label>
<input type="hidden" value="false" name="checkbox33">
<input type="checkbox" value="true" name="checkbox33"><i></i>
</label>
</div>
</td>
<td>
<div class="input-group bootstrap-datepicker date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" name="i_date_1" data-i-name="Nombre del Campo (Fecha)">
</div>
</td>
<td>
<input type="hidden" name="b" value="radio-chk-dis">1084
</td>
<td>
<div class="input-group bootstrap-timepicker time">
<span class="input-group-addon"><i class="far fa-clock"></i></span><input type="text" class="form-control" name="i_time_1" value="" data-i-name="Nombre del Campo (Fecha)">
</div>
</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tr>
<td>Dato A1</td>
<td>Dato b1</td>
<td>Dato c1</td>
<td>Dato d1</td>
<td>Dato e1</td>
<td>Dato f1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
<td>Dato d1</td>
</tr>
<tbody>
</table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.3.1/jszip-2.5.0/dt-1.10.25/b-1.7.1/b-colvis-1.7.1/b-html5-1.7.1/fc-3.3.3/fh-3.1.9/r-2.2.9/sc-2.0.4/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>