put datatables to two tables in the same page

Question

I have two tables that filled with javascrips AJAX, the problem is that I want to datatables both, they are on the same page.

Tables

<table id="Table01" class="table table-hover display">
    <thead>
        <tr id="tr_tablita">
            <th>#</th>
            <th>Código</th>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Total</th>
            <th>Movimientos</th>
        </tr>
    </thead>
    <tbody id="tabla_get_articulos_venta">

    </tbody>
</table>

<table id="table02" class="table table-hover display">
    <thead>
        <tr>
            <th>#</th>
            <th>Código</th>
            <th>Producto</th>
            <th>Precio</th>
            <th>Proveedor</th>
            <th>Movimientos</th>
        </tr>
    </thead>
    <tbody id="tabla_get_articulos">

    </tbody>
</table>

I fill the tables

var id_venta = <?php echo $id_venta;?>; // traigo el id de la venta para poder editar la venta
var contador = 1;

$(document).ready(function(){        
    get_articulos_venta(id_venta);
    get_articulos();  

    // $('table.display').DataTable();
    var allTables = $('table.display').DataTable();
});

function get_articulos() {

    $.ajax({
        url : "<?php echo base_url('Ventas_controller/get_articulos')?>",
        type: "POST",
        dataType: "JSON",
        success: function(data) {

            var html = '';
            var contador_art = 1;

            var filas = data.length;
            for (  i = 0 ; i < filas; i++){ //cuenta la cantidad de registros
                html += "<tr><td>" +
                contador_art + "</td><td>" +
                data[i].codigo + "</td><td>" +
                data[i].descripcion + "</td><td>" +
                "$ "+data[i].precioCompra + "</td><td>" +
                data[i].proveedor + "</td><td>"+
                "<a type='button' onclick='add_articulo_venta("+data[i].ideArticulo+")' class='btn btn-success'>" +
                    "<i class='fa fa-plus' style='color:#fff;'></i>" +
                "</a>" +"</td><tr>" ;

                contador_art++;
            }
            $('#tabla_get_articulos').html(html);  

        },
        error: function (jqXHR, textStatus, errorThrown) {
            swal({
              title: "Error!",
              text: "No trajeron los artículos del sistema!",
              icon: "error",
              button: true,
              dangerMode: false,
            })
            .then((willDelete) => {
              if (willDelete) {

              }
            });
        }
    });
}

function get_articulos_venta(id_venta) {

    $.ajax({
        url : "<?php echo base_url('Ventas_controller/get_articulos_venta')?>/"+id_venta,
        type: "POST",
        dataType: "JSON",
        success: function(data) {

            var html = '';
            var filas = data.length;

            for (  i = 0 ; i < filas; i++){ //cuenta la cantidad de registros
                html += "<tr><td>" +
                contador + "</td><td>" +
                data[i].codigo + "</td><td>" +
                data[i].descripcion + "</td><td>" +
                "$ "+data[i].precioCompra + "</td><td>" +
                data[i].cantidad + "</td><td>"+
                data[i].preciototal + "</td><td>"+
                "<a type='button' onclick='delete_articulo_venta("+data[i].ideDetalleVenta+")' class='btn btn-danger'>" +
                    "<i class='fa fa-times' style='color:#fff;'></i>" +
                "</a> " +
                "<a type='button' onclick='get_info_articulo_venta("+data[i].ideDetalleVenta+")'  class='btn btn-warning'>" +
                    "<i class='fa fa-pencil' style='color:#fff;'></i>" +
                "</a>" +"</td></tr>" ;

                contador++;
            }
            $('#tabla_get_articulos_venta').html(html); 
        },
        error: function (jqXHR, textStatus, errorThrown) {
            swal({
              title: "Error!",
              text: "No trajeron los artículos de la venta!",
              icon: "error",
              button: true,
              dangerMode: false,
            })
            .then((willDelete) => {
              if (willDelete) {

              }
            });
        }
    });
}

get_articulos_venta(parameter); fill the first table

get_articulos(); fill the second table

I need to apply datatables to both tables

Try this option

https://datatables.net/examples/basic_init/multiple_tables.html

And this is the result

Apply the design datatables but they appear as if they were empty the tables.

Answer 1

Inside the success function of your ajax call, AFTER the for loop builds the table, initialize the datatable.

function get_articulos_venta(id_venta) {

$.ajax({
    url : "<?php echo base_url('Ventas_controller/get_articulos_venta')?>/"+id_venta,
    type: "POST",
    dataType: "JSON",
    success: function(data) {

        var html = '';
        var filas = data.length;

        for (  i = 0 ; i < filas; i++){ //cuenta la cantidad de registros
            html += "<tr><td>" +
            contador + "</td><td>" +
            data[i].codigo + "</td><td>" +
            data[i].descripcion + "</td><td>" +
            "$ "+data[i].precioCompra + "</td><td>" +
            data[i].cantidad + "</td><td>"+
            data[i].preciototal + "</td><td>"+
            "<a type='button' onclick='delete_articulo_venta("+data[i].ideDetalleVenta+")' class='btn btn-danger'>" +
                "<i class='fa fa-times' style='color:#fff;'></i>" +
            "</a> " +
            "<a type='button' onclick='get_info_articulo_venta("+data[i].ideDetalleVenta+")'  class='btn btn-warning'>" +
                "<i class='fa fa-pencil' style='color:#fff;'></i>" +
            "</a>" +"</td></tr>" ;

            contador++;
        }
        $('#tabla_get_articulos_venta').html(html);
        $('#tabla_get_articulos_venta').DataTable({
        select: true,
        searching: true
    });


    },
    error: function (jqXHR, textStatus, errorThrown) {
        swal({
          title: "Error!",
          text: "No trajeron los artículos de la venta!",
          icon: "error",
          button: true,
          dangerMode: false,
        })
        .then((willDelete) => {
          if (willDelete) {

          }
        });
    }
});

}