delete data from a DataTable ()

Question

delete data from a DataTable ()

Navigation

#1 by (5 votes)
#2 by (2 votes)

3

How can I delete data from DataTable() ?, when instantiating

var table = $ ('# sampleTable'). DataTable ();

marks me as an error

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

Is there a way to even remove the function? since with the <table> only, if the data is removed and I try it with DataTable() the data is no longer removed

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>

Result

Even if the date changes, the same data follows

javascript html datatables

asked by user75463 13.03.2018 в 17:50

source

2 answers

2

the easiest way would be with javasript here I leave the other link remove row from html table with Jquery or JS

here is the example

link

<!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>

answered by 13.03.2018 в 20:36

How can I make it recognize "/" when concatenating with javascript? Time is not updated

score 5 · Accepted Answer

First of all, according to your code you are not loading the data in datatable you are only embedding them in the page with $(".data").append(rw); , although it is true that the library shows you as a datatable these are only the styles ie visually has loaded the colors and positions for the cells when you specified in the class you added class="table table-hover table-bordered data" .

If you need to load the data in datatable , through a ajax call, you could use this form

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

Depending on the version you have of datatables.js

Otherwise you should start the table after , to load the data in the way you do it now like this: $('#sampleTable').DataTable(); .

The DataTable() function allows you to "start" a datatable.

After doing this then you should effectively have a datatable created from the table ("#sampleTable") on your page.

If you want to get an instance of that datatable ( "once you are sure it has been created" ) you must use: dataTable()

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

Then you will have an instance of the datatable in variable table

How do you notice the function $.fn.dataTable.isDataTable tells you if an element is an instance of datatable

Now the way to delete a row from the datatable could be this

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

according to the documentation

NOTE: the importance here lies in understanding that rowReference , can be an element in the row so you can use jquery to search for a reference for example, when you load your datatable (if you keep doing it that way), you can assign a id unique to each row (tr) so you could look for it in this way $("tr[id=" + idRow + "]") , and you would have something like this:

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

I recommend to see the documentation of datatables.js , so that you understand better.