Skip to main content
update
Origen Enlace
user46896
user46896

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>

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>

Origen Enlace
user46896
user46896

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>