0

Espero puedan ayudarme, me gustaría saber si se puede tener un solo buscador para dos tablas distintas, lo que busco es solo tener un search y que este me filtre en las dos tablas que yo tengo. Estoy usando Material Desing Bootstrap para mis dateTable.--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Font Awesome -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
      rel="stylesheet"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      rel="stylesheet"
    />
    <!-- MDB -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css"
      rel="stylesheet"
    />
    <!-- Custom styles -->
    <link rel="stylesheet" href="css/admin.css" />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
      integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
      crossorigin="anonymous"
    ></script>
    <!-- Librerias de CSS para DataTables -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"
    />
  </head>
  <body>
    <h2 class="mb-3">Basic example 1</h2>
    <table id="dtBasicExample" class="table" width="100%">
      <thead>
        <tr>
          <th class="th-sm">Name</th>
          <th class="th-sm">Position</th>
          <th class="th-sm">Office</th>
          <th class="th-sm">Age</th>
          <th class="th-sm">Start date</th>
          <th class="th-sm">Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>

    <h2 class="mb-3">Basic example 2</h2>
    <table id="dtBasicExample2" class="table" width="100%">
      <thead>
        <tr>
          <th class="th-sm">Name</th>
          <th class="th-sm">Position</th>
          <th class="th-sm">Office</th>
          <th class="th-sm">Age</th>
          <th class="th-sm">Start date</th>
          <th class="th-sm">Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>

    <!-- MDB -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript" src="js/admin.js"></script>
    x1
    <!-- JQuery -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
    ></script>
    <!-- Bootstrap tooltips -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"
    ></script>
    <!-- Bootstrap core JavaScript -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"
    ></script>
    <!-- MDB core JavaScript -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"
    ></script>
    <!-- Librerias de BataTables -->
    <script
      type="text/javascript"
      charset="utf8"
      src="https://code.jquery.com/jquery-3.5.1.js"
    ></script>
    <script
      type="text/javascript"
      charset="utf8"
      src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"
    ></script>

    <script>
      $(document).ready(function () {
        $("#dtBasicExample").DataTable({
          lengthMenu: [
            [5, 15, 20, -1],
            [5, 15, 20, "Todos"],
          ],
          scrollX: "200px",
          language: {
            url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json",
          },
        });
        $(".dataTables_length").addClass("bs-select");
      });
    </script>
    <script>
      $(document).ready(function () {
        $("#dtBasicExample2").DataTable({
          lengthMenu: [
            [5, 15, 20, -1],
            [5, 15, 20, "Todos"],
          ],
          scrollX: "200px",
          language: {
            url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json",
          },
        });
        $(".dataTables_length").addClass("bs-select");
      });
    </script>
  </body>
</html>

2
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    el 24 mar. 2022 a las 0:52
  • stoy trabajando con dos tablas (DateTable) cada tabla tiene su buscador, pero implementé otro buscador este con el fin de buscar en las dos tablas, todo funciona, el detalle que tengo es que en mi buscador para ambas tablas solo busca en la primera página y no busca en las otras páginas, espero puedan orientarme para poder hacer que mi buscador también busque en la paginación el 25 mar. 2022 a las 20:02

1 respuesta 1

0

con respecto a la pregunta si deseas buscar en ambas tablas lo que deberías hacer es usar la función search() de Datatable que va a permitir buscar dentro de una tabla, en este caso puedes crear una función que permita buscar en ambas tablas como el siguiente código. Si deseas más información, te dejo el link de la documentación: https://datatables.net/reference/api/search()

function filterGlobal() {
   let valor_buscado = $('#global_search').val();
   $('#dtBasicExample1').DataTable().search(valor_buscado).draw();
   $('#dtBasicExample2').DataTable().search(valor_buscado).draw();
}

Se activará cada vez que se escriba dentro del buscador general (un solo buscador). Con el evento onkeyup se activará la función con el valor ingresado.

<input class="mb-3" type="text" id="global_search"value=""onkeyup="filterGlobal()"/>

Una recomendación es que las definiciones de las tablas lo pongas en un solo script.

Relacionando todo al código de ejemplo que mostraste en la pregunta, quedaría de la siguiente manera:

$(document).ready(function() {
  $("#dtBasicExample1").DataTable({
    lengthMenu: [
      [5, 15, 20, -1],
      [5, 15, 20, "Todos"],
    ],
    scrollX: "200px",
    language: {
      url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json",
    },
  });

  $("#dtBasicExample2").DataTable({
    lengthMenu: [
      [5, 15, 20, -1],
      [5, 15, 20, "Todos"],
    ],
    scrollX: "200px",
    language: {
      url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json",
    },
  });


});

function filterGlobal() {
  let valor_buscado = $('#global_search').val();
  $('#dtBasicExample1').DataTable().search(
    valor_buscado
  ).draw();
  $('#dtBasicExample2').DataTable().search(
    valor_buscado
  ).draw();
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- Font Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.2/mdb.min.css" rel="stylesheet" />
  <!-- Custom styles -->
  <link rel="stylesheet" href="css/admin.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
  <!-- Librerias de CSS para DataTables -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css" />
</head>

<body>
  <h2 class="mb-3">Busqueda Global</h2>
  <input class="mb-3" type="text" id="global_search" value="" onkeyup="filterGlobal()" />
  <h2 class="mb-3">Basic example 1</h2>
  <table id="dtBasicExample1" class="table" width="100%">
    <thead>
      <tr>
        <th class="th-sm">Name</th>
        <th class="th-sm">Position</th>
        <th class="th-sm">Office</th>
        <th class="th-sm">Age</th>
        <th class="th-sm">Start date</th>
        <th class="th-sm">Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
  </table>

  <h2 class="mb-3">Basic example 2</h2>
  <table id="dtBasicExample2" class="table" width="100%">
    <thead>
      <tr>
        <th class="th-sm">Name</th>
        <th class="th-sm">Position</th>
        <th class="th-sm">Office</th>
        <th class="th-sm">Age</th>
        <th class="th-sm">Start date</th>
        <th class="th-sm">Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>
  </table>

  <!-- MDB -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript" src="js/admin.js"></script>
  x1
  <!-- JQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
  <!-- Librerias de BataTables -->

  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></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.