eliminar datos de un DataTable()

publicado por: Anonymous

¿cómo puedo eliminar datos de DataTable()?, al instanciar

var table = $(‘#sampleTable’).DataTable();

me marca como error

TypeError: $(…).DataTable is not a function

¿existe una forma incluso de quitar la función? puesto que con la <table> solo, si se quitan los datos y lo pruebo con DataTable() ya no se quitan los datos

function data() {
var a = document.getElementById("fecha1").value;
var b = document.getElementById("fecha2").value;
//var table = $('#sampleTable').DataTable();
$("#sampleTable tr").slice(1).remove();
$("#load").css("display", "inline");
$.ajax({
    url: 'data',
    type: 'GET',
    data: {fin: a, ffn: b},
    success: function (rt) {for (var i = 1; i < rt.length; i++) {
            if (rt[i].id !== undefined) {
                rw = "<tr onclick='Dsc(" + rt[i].id + ")'><th>" + rt[i].nombreAg + "</th><th>" + rt[i].nInput + "</th><th>" + rt[i].tInput + "</th><th>" + rt[i].comision + "</th><th>" + rt[i].nOutput + "</th><th>" + rt[i].tOutput + "</th><th>" + rt[i].nCancel + "</th><th>" + rt[i].tCancel + "</th><th>" + rt[i].diff + "</th></tr>";
                $(".data").append(rw);
            }
        }
        $("#load").css("display", "none");
        $("#tb").append("<script type='text/javascript'>$('#sampleTable').DataTable({'language': {'url': '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json'},'bDestroy': true, 'aaSorting': [[0, 'desc']]});</script> ");
    }
});

html

    <div class="row" style="margin-bottom: 20px;"><div class="col-sm-4">Desde:<input type="text" class="form-control" id="fecha1" name="fecha" required="true" value="${ant}"></div><div class="col-sm-4">Hasta:<input type="text" class="form-control" id="fecha2" name="fecha" required="true" value="${hoy}"></div><div class="col-sm-3">.<input class="form-control btn btn-primary" type="submit" value="buscar" onclick="data()" /></div></div>
<div id="tb" style="overflow-x: auto;padding-right: 15px;">
    <table class="table table-hover table-bordered data" id="sampleTable">
        <thead>
            <tr style="background-color: #00002f;color: #fff">
                <th>Agencia</th>
                <th># Recividos</th>
                <th>S/ Recivido</th>
                <th>S/ Comision</th>
                <th># Recividos</th>
                <th>S/ Entregado</th>
                <th>S/ Cancelados</th>                    
                <th># Cancelados</th>
                <th>S/ Diferencia</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</div>       
<div id="load" style="height: 100px">
    <div class="loader" id="loader"></div>
</div>
<script src="../static/sjs/datepicker.js" type="text/javascript"></script>    <script type="text/javascript" src="../static/sjs/plugins/jquery.dataTables.min.js"></script>
<script>
    $("#fecha1").datepicker({
        format: 'dd/mm/yyyy'
    });
    $("#fecha2").datepicker({
        format: 'dd/mm/yyyy'
    });
    data();
</script>
<script type="text/javascript" src="../static/sjs/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/sjs/plugins/dataTables.bootstrap.min.js"></script>

Resultado

introducir la descripción de la imagen aquí

aunque cambie la fecha, siguen los mismos datos

solución

En primer lugar segun tu codigo no estas cargando los datos en el datatable solo los estas incrustando en la pagina con $(".data").append(rw); , si bien es cierto que la libreria te lo muestra como un datatable estos son solo los styles es decir visualmente ha cargado los colores y las posiciones para las celdas cuando especificaste en el class agregaste class="table table-hover table-bordered data".

  • Si necesitas cargar los datos en el datatable, a través de una llamada ajax podrias usar esta forma

$('#sampleTable').DataTable( {
"ajax": 'url/array.html'
});

Segun la version que tengas de datatables.js

De otra forma deberás iniciar la table despues, de cargar los datos de la forma en la que lo haces ahora asi : $('#sampleTable').DataTable();.

La function DataTable() permite “iniciar” un datatable.

Después de hacer esto entonces efectivamente deberías tener un datatable creado a partir del table ("#sampleTable") en tu pagina.


Si lo que quieres es obtener una instancia de ese datatable (“una ves seguro de que este ha sido creado”)
debes usar : dataTable()

if ($.fn.dataTable.isDataTable('#sampleTable')) 
    var table = $('#sampleTable').dataTable();

Entonces tendras una instancia del datatable en la variable table

Como notaras la function $.fn.dataTable.isDataTable te indica si un elemento es una instancia de datatable

Ahora la forma de eliminar una fila del datatable podria ser esta

table.row(rowReference).remove().draw(false);

segun la documentacion

NOTA : la importancia aqui recae en entender que rowReference, puede ser un elemento en la fila por lo que puedes usar jquery para buscar por una referencia por ejemplo, cuando cargas tu datatable (si es que lo sigues haciendo de esa forma), puedes asignarles un id unico a cada fila (tr) por lo que podrias buscarlo de esta forma $("tr[id=" + idRow + "]") , y tendrias algo como esto :

table .row($("tr[id=" + idRow + "]")).remove().draw(false);

recomiendo ver la documentacion de datatables.js, para que entiendas mejor.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *