4

¿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

2
  • Puedes añadir el código de html y script. El error puede recaer en que llamas en el orden en el cual no es debido por eso te aparee ese error. Commented el 13 mar. 2018 a las 16:52
  • El error de TypeError: $(...).DataTable is not a function, es porque no haz cargado el script de Datetable, fíjate si redirecionaste bien el script. Commented el 13 mar. 2018 a las 17:08

2 respuestas 2

7

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.

5
  • Estoy en el segundo caso $('#sampleTable').DataTable(); por eso probé $("#sampleTable tr").slice(1).remove(); para refrescar toda la tabla, pero solo se acumulan los row, con tu validacion ya no sale TypeError: $(...).DataTable is not a function, ahora me sale error en clear() y destroy() , ¿tendrás alguna idea para esto?, el DataTable funcionan sin problema ejm. buscar, ordenar..
    – user75463
    Commented el 13 mar. 2018 a las 22:21
  • 1
    Podrías darme mas detalles sobre el error de clear() y destroy() ? no logro comprenderte.
    – theboshy
    Commented el 13 mar. 2018 a las 22:29
  • 1
    segun su documentacion var table = $('#example').DataTable(); table .clear() .draw(); o table.destroy(); son para vaciar el datatable
    – user75463
    Commented el 13 mar. 2018 a las 22:32
  • Me refería a que tipo de error aparece, aunque por lo que veo en tu comentario nuevamente estas usando .DataTable(), en vez de .dataTable(), como lo explique en mi respuesta para obtener una instancia de el datatable. var table = $('#sampleTable').dataTable();
    – theboshy
    Commented el 14 mar. 2018 a las 12:58
  • 1
    Ok revise su uso del la function clear() es cierto 2 cosas aqui. 1- .DataTable() no retorna la misma instancia del datatable que .dataTable() por lo que para el uso de clear() si es necesario .DataTable(). 2- .DataTable() funcionara solo si ya ha sido creada una instancia del datatable sobre ese elemento que obtienes por la id ($("#")), (amenos que le incluya configuración que es la inicialziacion normal ). en conclusion en su caso asegúrese de que el datatable ya ha sido creado antes de obtener una instancia de esta forma : $('#example').DataTable();
    – theboshy
    Commented el 14 mar. 2018 a las 13:31
3

la manera mas facil seria con javasript aqui le dejo el otro link eliminar fila de tabla html con Jquery o JS

aqui esta el ejemplo

http://jsbin.com/qucododoza/edit?html,console,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table border="1">
    <tr id="fila0">
      <td>Columna 1</td>
      <td>Columna 2</td>
      <td>Columna 3</td>
      <td>Columna 4</td>
      <td>Columna 5</td>
      <td>Columna 6</td>
      <td><input type="button" onclick="eliminarFila(0);" value="Eliminar" /></td>
    </tr>
    <tr id="fila1">
      <td>Columna 1</td>
      <td>Columna 2</td>
      <td>Columna 3</td>
      <td>Columna 4</td>
      <td>Columna 5</td>
      <td>Columna 6</td>
      <td><input type="button" onclick="eliminarFila(1);" value="Eliminar" /></td>
    </tr>
    <tr id="fila2">
      <td>Columna 1</td>
      <td>Columna 2</td>
      <td>Columna 3</td>
      <td>Columna 4</td>
      <td>Columna 5</td>
      <td>Columna 6</td>
      <td><input type="button" onclick="eliminarFila(2);" value="Eliminar" /></td>
    </tr>
    <tr id="fila3">
      <td>Columna 1</td>
      <td>Columna 2</td>
      <td>Columna 3</td>
      <td>Columna 4</td>
      <td>Columna 5</td>
      <td>Columna 6</td>
      <td><input type="button" onclick="eliminarFila(3);" value="Eliminar" /></td>
    </tr>
    <tr id="fila4">
      <td>Columna 1</td>
      <td>Columna 2</td>
      <td>Columna 3</td>
      <td>Columna 4</td>
      <td>Columna 5</td>
      <td>Columna 6</td>
      <td><input type="button" onclick="eliminarFila(4);" value="Eliminar" /></td>
    </tr>
  </table>
  <script>
    function eliminarFila(index) {
        $("#fila" + index).remove();
    }
  </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.