使用Jquery動態創建的數據表

Question

我正在以動態方式創建一個數據表，值得一提的是，我正在使用PHP（Laravel），出於非常特殊的需要，我以模態顯示該數據表。

問題是由於我要使用本機搜索選項，因此我正在使用DataTables插件 。

我不相信PHP的DataTable，相信使用AJAX的DataTable，向您展示了我的工作方式：

$.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卻不知道這一點。 而是使用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 + ">"
            },
        }
    ],
});