Cargar table después de pasar form con jquery .load()

MokasHernandez

Tengo un problema al momento de estar navegando entre forms con jquery y .load(); hasta ahí va bien el problema bien cuando quiero volver a cargar mi tabla con un botón, no funciona, la estoy llenando con AJAX

    $('#btn-rango').on('click', function() {
    var textFechaI = $('#dateI').val();
    var textFechaF = $('#dateF').val();

    mytable = $('#myTable').DataTable({
        destroy: true,
        responsive: true,
        rowReorder: {
            selector: 'td:nth-child(2)'
        },
          'ajax': {
              url: "get_data.php",
              data: {'FechaI' : textFechaI,
                     'FechaF' : textFechaF},
              type: "POST"
            }
              });

Digamos que la primera vez que entro a la página si hace bien la función y los filtros, pero si regreso digamos al form 1, y vuelvo a entrar a éste form 2, ya no hace la función el botón, pero si muestra alerts u otras funciones, solo el datatable deja de funcionar

kthorngren

only the datatable stops working

Without seeing your page its hard to understand your problem description. What exactly stops working?

You might need to use ajax.data as a function. See the examples in the docs and this example.

If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

MokasHernandez

Error de Consola adjuntado:

kthorngren

Sounds like you haven't laoded datatables.js. See the Install docs and this base example. If you still need help the please post a link to your page or a test case showing the issue for debugging assistance.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

MokasHernandez

Lo que quiero es que al seleccionar ciertos parametros que tengo en un inputy type date, se recargue la tabla con esos nuevos filtros

MokasHernandez

kthorngren

Use ajax.data as a function as I mentioned above. When you want to fetch a new set of data use ajax.reload().

Kevin

MokasHernandez

Disculpa la pregunta pero referente al código que tengo, no sé muy bien como anexarlo

mytable = $('#myTable').DataTable({
    destroy: true,
    responsive: true,
    rowReorder: {
        selector: 'td:nth-child(2)'
    },
      'ajax': {
          url: "get_data.php",
          data: {'FechaI' : textFechaI,
                 'FechaF' : textFechaF},
          type: "POST"
        }
          });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Here is a simple example:
http://live.datatables.net/pigupuzi/1/edit

You can see the parameters being sent in the console or use the browser's network inspector tool.

Kevin

MokasHernandez

Muchas gracias compañero, me funciona perfectamente, tal cuál lo propusiste, muchas gracias

Pero me sigue duplicando el cuadro de búsqueda y el de paginación como lo mostré anteriormente

kthorngren

Sounds like a CSS issue. Make sure you have all the correct files by using the Download Builder. To help troubleshoot we will need to see the problem. Please post a link to your page or a test case showing the duplicated elements.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

MokasHernandez

Adjunto código de mis librerias, mi código al cargar el datatable y la iimagen de la evidencia

<script type="text/javascript">

  $(document).ready( function () {

    $('#btn-atras').on('click', function() {
    $("#body-1").load('respaldo.php');
    return false;
    });
    
    mytable = $('#myTable').DataTable({
      destroy: true,
      responsive: true,
      rowReorder: {
        selector: 'td:nth-child(2)'
      },
      "ajax":{
        "url" :"get_data.php",
        "type": "POST",
         data  : function (d) {
          d.FechaI = $('#dateI').val(),
          d.FechaF = $('#dateF').val();
          console.log('Sending search paramters:', d);
        } 
      }
    });

    $('#btn-rango').on('click', function() {
    mytable.ajax.reload();
      return false;
    });

  });
</script>

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css"       crossorigin="anonymous"
      referrerpolicy="no-referrer">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.dataTables.min.css">

    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" crossorigin="anonymous"
      referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>

    <link href="styles/style.css" rel="stylesheet" type="text/css">

MokasHernandez

Quiero mencionar que estoy navegando entre páginas con jquery y el evento .load() para pasar a un siguiente formulario, no se si tenga que ver con esa duplicidad

kthorngren

Lines 13 and 14:

<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js" crossorigin="anonymous"

You are loading Datatables twice. Remove one of these lines.

Kevin

MokasHernandez

No compañero, las sigue duplicando ya quite una y deje la otra y viceversa y aún así

kthorngren

I placed your code from the last code snippet (the script and link tags) into the example test case:
http://live.datatables.net/pigupuzi/2/edit

The Datatables elements aren't duplicated. Not sure what styles/style.css has but may it is conflicting or something else is conflicting. In order to help with styling issues we will need to see the problem. Please update the latest test case, create your own test case or provide a link to your page so we can take a look.

Kevin

MokasHernandez

Encontramos que en mi código se está metiendo una datatable dentro de la otra datatable