Problem removing a row in a jqueryDatatable

Question

Problem removing a row in a jqueryDatatable

Navigation

#1 by (1 votes)

0

Upload data into a table in a jquery-datatables , when I delete a row after using an event that is placed on a label in the following way " <a onclick='eliminar()'></a> ", this method is activated and it is eliminated by just clicking on any part of the row, I can notice that if I add a console.log() within the function I use to delete the row, it prints me several times depending on the number of clicks I have given on the rows, the code is as follows:

$(function(){
    cargarDatos();
});
// Cargo los datos en la tabla
//
function cargarDatos(){
    var t = $("#luminariasAuditar").DataTable();
   for (var i = 0; i < luminaria.length; i++) {
     t.row.add([
       luminaria[i].color,
       luminaria[i].value,
       '<a href="#?" onclick=\'eliminar();\' >X</a>'
     ]).draw(false);

   }
}
// función con la que elimino las filas 
//
function eliminar () {
  var t = $("#luminariasAuditar").DataTable();
  $('#luminariasAuditar tbody tr').on('click', function (event) {
    console.log("clics");
    t.row(this).remove().draw();
  });
};

Working example

The intention is to delete the row only when you click on the " X "

javascript jquery datatables

asked by Alan 22.11.2016 в 22:11

source

1 answer

Create a horizontal grid on Android Wear How to apply color to Bootstrap popover using jquery?

score 1 · Accepted Answer

In the way you assign the event ( onclick ), it is necessary to pass in some way a reference to the button (or link) that was clicked on.

After that, you get that parameter in your function and you eliminate the row directly. Currently, what you are doing is adding another event to the click event in each row, adding an event every time you click (and thereby eliminating more than one <tr> ).

Here I leave an executable snippet with the changes that should be made.

$(function() {
  cargarDatos();
});

function cargarDatos() {
  var t = $("#luminariasAuditar").DataTable();
  for (var i = 0; i < luminaria.length; i++) {
    t.row.add([
      luminaria[i].color,
      luminaria[i].value,
      // agregar "this" aquí
      '<a href="#?" onclick=\'eliminar(this);\' >X</a>'
    ]).draw(false);
  }
}

function eliminar(boton) {
  // "boton" es el <a> que se hizo clic
  var t = $("#luminariasAuditar").DataTable();
  
  // https://datatables.net/reference/api/row().remove()
  // $().parents() obtiene el <tr> padre
  t.row($(boton).parents('tr')).remove().draw();
};

var luminaria = [{
  color: "red",
  value: "#f00"
}, {
  color: "green",
  value: "#0f0"
}, {
  color: "blue",
  value: "#00f"
}, {
  color: "cyan",
  value: "#0ff"
}, {
  color: "magenta",
  value: "#f0f"
}, {
  color: "yellow",
  value: "#ff0"
}, {
  color: "black",
  value: "#000"
}];

<table class="table table-bordered table-striped" id="luminariasAuditar">
  <thead>
    <tr>
      <th>Numero serie</th>
      <th>Dirección</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>