Question

我有一张桌子：

一个名为“Aplicar Filtro”的按钮，按照我在标题下面的输入字段中输入的内容过滤表格。

问题是它没有做任何事情，我不知道为什么，控制台没有显示任何错误。

这是我的代码，pueblaTabla()特别是过滤表格的函数：

<?php
include '../definenachopc.php';
// include '../definegrupo2.php';
$conn = new mysqli($HOST, $USER, $PASS, $DB);
$orderBy = "idAuto";
$order = "desc";
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>ABM</title>
        <link rel="stylesheet" href="style.css">
        <script src=".././jquery-3.2.1.min.js"></script>
    </head>
<body>
    <div class="parte">
        <button id="cmdFiltrar">Aplicar filtro</button>
    </div>
    <div class="parte">
        <button id="cmdLimpiaFiltros">Limpiar filtros</button>
    </div>
<div class="demo-content">
 <div id="demo-order-list">
    <?php
    $sql = "SELECT * FROM AUTOS";
    $result = $conn->query($sql);
    $resultadoNumeroDeAutos = $result->num_rows;
    ?>

    <table class="table-content">
        <thead>
            <tr>
                <th onClick="orderColumn('idAuto','desc')">idAuto</th>
                <th onClick="orderColumn('Marca','asc')">Marca</th>
                <th onClick="orderColumn('Modelo','asc')">Modelo</th>
                <th onClick="orderColumn('idTipoDeVehiculo','asc')">idTipoDeVehiculo</th>
                <th onClick="orderColumn('FechaDeLanzamiento','asc')">FechaDeLanzamiento</th>
            </tr>
            <tr>
                <td></td>
                <td><input type="text" name="filtroMarca" id="filtroMarca"></td>
                <td><input type="text" name="filtroModelo" id="filtroModelo"></td>
                <td><select id="filtroidTipoDeVehiculo" name="filtroidTipoDeVehiculo">
                    <option></option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select></td>
                <td><input type="text" name="filtroFechaDeLanzamiento" id="filtroFechaDeLanzamiento"></td>
            </tr>
        </thead>
        <?php
        $salidaJson = array("autos" => array());
        while ($row = $result->fetch_assoc())
            {
                $salidaJson['autos'][] = array("idAuto"             => $row['idAuto'],
                                            "Marca"              => $row['Marca'],
                                            "Modelo"             => $row['Modelo'],
                                            "idTipoDeVehiculo"   => $row['idTipoDeVehiculo'],
                                            "FechaDeLanzamiento" => $row['FechaDeLanzamiento']);
            }

        $salidaJson = json_encode($salidaJson);
        ?>
        <tbody id="tbDatos">
        </tbody>
    </table>
      </div>
  </div>
    <h1>Número de autos: <?php echo $resultadoNumeroDeAutos; ?></h1>

    <script>
        var miTabla = $("tbody");
        var listaDeAutos = <?php echo $salidaJson ?>;
        console.log(listaDeAutos);
        // carga la tabla
        $(document).ready(function() {
            $.each(listaDeAutos.autos, function(i, item) {
                    var html = '<tr><td>'+ item.idAuto + '</td><td>' + item.Marca + '</td><td>'+ item.Modelo + '</td><td>' + item.idTipoDeVehiculo + '</td><td>' + item.FechaDeLanzamiento + '</td></tr>';
                    miTabla.append(html);
                });

        })

        function limpiarFiltros() {
            $("#filtroMarca").val('');
            $("#filtroModelo").val('');
            $("#filtroidTipoDeVehiculo").val('');
            $("#filtroFechaDeLanzamiento").val('');
        };
        function orderColumn(column_name,column_order) {
            $.ajax({
                url: "order-column.php",
                data:'orderby='+column_name+'&order='+column_order,
                type: "POST",
                success: function(data){    
                    $('#demo-order-list').html(data);
                }
            });
        }

        function pueblaTabla() {
            $("#tbDatos").empty();
            $.ajax({
                type: "POST",
                url: "",
                data: {
                    fMarca: $("#filtroMarca").val(),
                    fModelo: $("#filtroModelo").val(),
                    fidTipoDeVehiculo: $("#filtroidTipoDeVehiculo").val(),
                    fFechaLan: $("#filtroFechaLan").val(),
                },
                success: function(data) {
                    $("#tbDatos").empty();
                    $.each(listaDeAutos.autos, function(i, item) {
                        var html = '<tr><td>'+ item.idAuto + '</td><td>' + item.Marca + '</td><td>'+ item.Modelo + '</td><td>' + item.idTipoDeVehiculo + '</td><td>' + item.FechaDeLanzamiento + '</td></tr>';
                        miTabla.append(html);

                        // /*Nuevo para abm*/
                        // var objTd = document.createElement("td");
                        // objTd.innerHTML = "<button>M</button>";
                        // objTd.onclick = function() {
                            //     var cadenaDePaso = "?ID=" + argValor.ID;
                            //     location.href = "./fichaAbm.php" + cadenaDePaso;
                            // }
                            // objTr.appendChild(objTd);

                            // var objTd = document.createElement("td");
                            // objTd.innerHTML = "<button>B</button>";
                            // objTd.onclick = function() {
                                //     var cadenaDePaso = "?ID=" + argValor.ID;
                                //     location.href = "./baja.php" + cadenaDePaso;
                                // }
                                // objTr.appendChild(objTd);

                            });
                        }
                    });

                }

        $("#cmdLimpiaFiltros").click(function() {
            limpiarFiltros();
        });

        $( "#cmdFiltrar" ).click(function() {
            pueblaTabla();
        }); 

    </script>

</body>
</html>

Answer 1

向Ajax调用添加一个失败函数... do console.log ...如果它是Ajax调用，你就会知道失败的原因

过滤功能不起作用

1 个答案: