时间戳

首页 > 解决方案 > 使用 Jquery 动态创建的数据表

php - 使用 Jquery 动态创建的数据表

问题描述

我正在以动态方式创建数据表，值得一提的是，我正在使用 PHP（Laravel），出于非常特殊的需要，我在模态中显示数据表。

问题是我正在使用DataTables 插件，因为我想使用本机搜索选项。

我不相信 PHP 的 DataTable，我相信它使用 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"
            }
        }

    });

窗口显示堵塞特性但不工作。

在此处输入图像描述

我怎么知道？嗯......它不过滤，它不计算记录并且它不显示页面，我已经阅读了很多关于这个案例的信息，但我真的没有得到它的工作方式。

标签： phpjquerydatabaselaraveldatatables

解决方案

发生这种情况是因为您手动创建表而 dataTable 没有意识到这一点。相反，使用dataTable 的ajax 选项。

您的 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 + ">"
            },
        }
    ],
});

推荐阅读