1

¿Como puedo obtener el valor que esta en la barra de búsqueda de datatables si tengo 2 tablas? Tengo 2 tablas de las cuales quiero obtener el valor que ingrese por teclado el usuario en la caja de búsqueda que agrega datatables. Ejecute un ejemplo y me obtiene de forma correcta los valores en el input de la primer tabla, me imprime por consola los valores que oprime por teclado el usuario, quise colocar el mismo ejemplo para una segunda tabla en el mismo template pero mi función no obtiene los datos ingresados solo entra a mi función pero no obtiene los valores. Cada tabla la identifico por id no se que pueda ser lo que estoy ejecutando mal

¿Alguna idea de que pueda estar pasando?

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


$('#example').on('search.dt', function() {
    var value = $('.dataTables_filter input').val();
    console.log(value);
});    



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


$('#example2').on('search.dt', function() {
    var value = $('.dataTables_filter input').val();
    console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
 <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Gecko</td>
            <td>Seamonkey 1.1</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Epiphany 2.20</td>
            <td>Gnome</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 1.2</td>
            <td>OSX.3</td>
            <td>125.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 1.3</td>
            <td>OSX.3</td>
            <td>312.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 2.0</td>
            <td>OSX.4+</td>
            <td>419.3</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 3.0</td>
            <td>OSX.4+</td>
            <td>522.1</td>
            <td>A</td>
        </tr>
    </tbody>
</table>
<table id="example2">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Gecko</td>
            <td>Seamonkey 1.1</td>
            <td>Win 98+ / OSX.2+</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
            <td>Epiphany 2.20</td>
            <td>Gnome</td>
            <td>1.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 1.2</td>
            <td>OSX.3</td>
            <td>125.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 1.3</td>
            <td>OSX.3</td>
            <td>312.8</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 2.0</td>
            <td>OSX.4+</td>
            <td>419.3</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Webkit</td>
            <td>Safari 3.0</td>
            <td>OSX.4+</td>
            <td>522.1</td>
            <td>A</td>
        </tr>
    </tbody>
</table>

1 respuesta 1

0

El problema se debe a que en ambos casos estas utilizando el mismo selector, para buscar en todo el documento y obtener el input.

Solución:

Podrías cambiar esto:

$('.dataTables_filter input').val();

Por esto:

$(this).closest('.dataTables_wrapper').find('.dataTables_filter input').val();

Ejemplo:

let table = $('table').DataTable();
table.on('search.dt', function() {
  var value = $(this).closest('.dataTables_wrapper').find('.dataTables_filter input').val();
  console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>Gecko</td>
        <td>Seamonkey 1.1</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Gecko</td>
        <td>Epiphany 2.20</td>
        <td>Gnome</td>
        <td>1.8</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Webkit</td>
        <td>Safari 1.2</td>
        <td>OSX.3</td>
        <td>125.5</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Webkit</td>
        <td>Safari 1.3</td>
        <td>OSX.3</td>
        <td>312.8</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Webkit</td>
        <td>Safari 2.0</td>
        <td>OSX.4+</td>
        <td>419.3</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Webkit</td>
        <td>Safari 3.0</td>
        <td>OSX.4+</td>
        <td>522.1</td>
        <td>A</td>
      </tr>
    </tbody>
</table>
<table id="example2">
  <thead>
    <tr>
      <th>Rendering engine</th>
      <th>Browser</th>
      <th>Platform(s)</th>
      <th>Engine version</th>
      <th>CSS grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gecko</td>
      <td>Seamonkey 1.1</td>
      <td>Win 98+ / OSX.2+</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Gecko</td>
      <td>Epiphany 2.20</td>
      <td>Gnome</td>
      <td>1.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Webkit</td>
      <td>Safari 1.2</td>
      <td>OSX.3</td>
      <td>125.5</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Webkit</td>
      <td>Safari 1.3</td>
      <td>OSX.3</td>
      <td>312.8</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Webkit</td>
      <td>Safari 2.0</td>
      <td>OSX.4+</td>
      <td>419.3</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Webkit</td>
      <td>Safari 3.0</td>
      <td>OSX.4+</td>
      <td>522.1</td>
      <td>A</td>
    </tr>
  </tbody>
</table>


Referencias:

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.