Таблицы данных, созданные динамически с помощью Jquery

Question

Я создаю Datatable динамически, стоит упомянуть, что я использую PHP (Laravel), для очень конкретной необходимости я показываю Datatable в модальном режиме.

Проблема в том, чтоЯ использую плагин DataTables , так как я хочу использовать встроенную опцию поиска.

В DataTable я не верю с PHP, я верю, что с помощью AJAX, я покажу вам, как яДелаем это:

$.ajax
({
   url:'../../ingresoarticulos/buscarIngresosTerminadosDesechados',
   type:'get',
   dataType:'json',
   beforeSend: function () {
   $cargando.show();

},
complete: function () {
    $cargando.hide();

},
  success: function (data)
 {
    var $resultado=data.ingresosTerminadosDesechados;
    var $filas='';

   if($.isEmptyObject($resultado))
   {
       $filas += "<tr>";
       $filas += "<td colspan='7'><h4 style='text-align: 
       center'>"+$txt_finished_discarded_items+"</h4></td>";
       $filas += "</tr>";
   }
    $.each($resultado,function (index,valor)
    {
       var $id = "<td id='id'>"+valor.id+"</td>";
       var $numeroSolicitud = "<td id='solicitud_id' >"+valor.id_solicitud+"</td>";
       var $numeroSerie = "<td id='numero_serie'>"+valor.serie_articulo+"</td>";
       var $numeroSku = "<td id='numero_sku'>"+valor.sku_articulo+"</td>";
       var $totalServicio = "<td id='total_servicio'>"+parseFloat(valor.total_ingreso).toFixed(2)+"</td>";
       var $agregarServicio="<td class='click'><input type='button' id='agregar_servicio' class='btn-sm btn-info col-lg-12 col-xs-12 col-sm-12 col-md-12 incluir' value="+$txt_btn_add+"></td>";
       if(valor.estatus_ingreso==="Terminado")
       {
           var $estadoArticulo = "<td id='estado_articulo'  style='color: #3d8b3d;font-weight: bold'>"+$txt_status_article_finished+"</td>";
           var $pesoArticulo = "<td id='peso_articulo'>"+parseFloat(valor.peso_articulo).toFixed(2)+"</td>";
       }
       else
           if(valor.estatus_ingreso==="Desechado")
           {
               var $estadoArticulo = "<td id='estado_articulo' style='color: #b0141a;font-weight: bold'>"+$txt_status_article_discarded+"</td>";
               var $pesoArticulo = "<td id='peso_articulo'>"+parseFloat(0.00).toFixed(2)+"</td>";
           }


       $filas += "<tr data-status='"+valor.estatus_ingreso+"'>";
        $filas += $id;
        $filas += $numeroSolicitud;
        $filas += $numeroSerie;
        $filas += $numeroSku;
        $filas += $pesoArticulo;
        $filas += $totalServicio;
        $filas += $estadoArticulo;
        $filas += $agregarServicio;
       $filas += "</tr>";
    });
   $("#tablemodalarticulostd tbody").html($filas);

Все там отлично работает, проблема возникает, когда я прохожу подключение к DataTable.

$solicitudEnvio.DataTable({
        // "paging": false,
        // "info": false,
        //
        "order": [[0, "desc"]],
        "language": {
            "search": "Buscar: ",
            "searchPlaceholder": "Escriba los datos que desea buscar",
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            }
        }

    });

В окне отображаются характеристики подключения, но он не работает.

Откуда я знаю?Ну ... он не фильтрует, он не считает записи и не показывает страницу, я много читал об этом деле, но я действительно не понял, как это работает.

Answer 1

Это происходит потому, что вы создаете таблицу вручную, а dataTable не знает об этом. Вместо этого используйте параметр ajax dataTable.

Ваша инициализация DataTable должна быть примерно такой, как показано ниже.

$solicitudEnvio.DataTable({
    "order": [[0, "desc"]],
    "language": {
        "search": "Buscar: ",
        "searchPlaceholder": "Escriba los datos que desea buscar",
        "sProcessing": "Procesando...",
        "sLengthMenu": "Mostrar _MENU_ registros",
        "sZeroRecords": "No se encontraron resultados",
        "sEmptyTable": "Ningún dato disponible en esta tabla",
        "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
        "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
        "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
        "sInfoPostFix": "",
        "sUrl": "",
        "sInfoThousands": ",",
        "sLoadingRecords": "Cargando...",
        "oPaginate": {
            "sFirst": "Primero",
            "sLast": "Último",
            "sNext": "Siguiente",
            "sPrevious": "Anterior"
        }
    },
    "ajax": {
        url:'../../ingresoarticulos/buscarIngresosTerminadosDesechados',
        type:'get',
        dataType:'json',
        beforeSend: function () {
            $cargando.show();
        },
        complete: function () {
            $cargando.hide();
        },
    },
    "columnDefs": [
        {
            target: 4,
            render: function (d) {
                if (r.estatus_ingreso==="Terminado") {
                    return parseFloat(d).toFixed(2);
                } else if (r.estatus_ingreso==="Desechado") {
                    return parseFloat(0.00).toFixed(2);
                }
            },
        },
        {
            target: 5,
            render: function (d) {
                return parseFloat(d).toFixed(2)
            },
        },
        {
            target: 6,
            render: function (d, t, r) {
                if (r.estatus_ingreso==="Terminado") {
                    return $txt_status_article_finished;
                } else if (r.estatus_ingreso==="Desechado") {
                    return $txt_status_article_discarded;
                }
            },
        },
        {
            target: 7,
            render: function (d) {
                return "<input type='button' id='agregar_servicio' class='btn-sm btn-info col-lg-12 col-xs-12 col-sm-12 col-md-12 incluir' value=" + d + ">"
            },
        }
    ],
});