javascript 对于多个下拉选项( AJAX 、JQuery)，未显示DataTable值

我有两个参数（'filter'，'filter2'），我想过滤我的SQLITE3DB（' tutorial.db'）;然后这些值显示在DataTable中。但是，每次该表都是空白的，并且虽然在一些编辑之前它可以处理一个参数，但不能处理两个参数。我不知道为什么。
我有两个文件："索引. php"和"获取. php"。
index.php:

<!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>Ajax Filter table</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
    <script>
        //making DataTable when HTML loads
        $(document).ready(function(){
            function create_list(data){
                $('#tablexample').DataTable( {
                    destroy: true,
                    searching: false,
                    "data": data,
                    "columns": [
                        { "data": "id" },
                        { "data": "fname"},
                        { "data": "lname"},
                        { "data": "type"}
                    ]
                } );
            }
            //by default, all values are loaded to table
            $.ajax({
                url:'fetch.php?filter=all&filter2=all',
                type:'GET',
                success:function(data){
                    var d = JSON.parse(data);
                    create_list(d);
                }
            })
            //datatable reloads when this parameter changes
            $('#filter').on('change',function(){
                var filter = $('#filter').val();
                var filter2 = $('#filter2').val();
                $.ajax({
                url:'fetch.php?filter='+filter+'&filter2='+filter2,
                type:'GET',
                success:function(data){
                    var d = JSON.parse(data);
                    create_list(d);
                }
            })
            }
            )
            //datatable reloads when this parameter changes
            $('#filter2').on('change',function(){
                var filter = $('#filter').val();
                var filter2 = $('#filter2').val();
                $.ajax({
                url:'fetch.php?filter='+filter+'&filter2='+filter2,
                type:'GET',
                success:function(data){
                    var d = JSON.parse(data);
                    create_list(d);
                }
            })
            }
            )
        })
    </script>
    //ignore this; some css
    <style>
        .checkbox {
            margin-right : 5px;
            font-size:16px;

        }
        input[type="checkbox"]{
            margin-right : 5px;
        }
        table {
            margin-top:10px;
        }
        table tr {
            border-bottom: 1px solid #ddd;
        }
        table tr th {
            text-transform:uppercase;
            padding:5px 10px;
        }
        table tr td {
            padding:5px 10px;
        }
        table tr:nth-child(odd){
            background:#eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="jumbotron">
           <h1> Jquery Ajax Filter</h1>
        </div>

    </div>

    <p id="print"></p>

    <div class="container">
        <div class="col-md-8 col-md-offset-2">

            <select id="filter">
            
                <option value="all" name="">All</option>
                <option value="intern">Intern</option>
                <option value="employee">employee</option>
                <option value="temp">temp</option>
            </select>

            <select id="filter2">
            
                <option value="all" name="">All</option>
                <option value="Doe">Doe</option>
                <option value="Williams">William</option>
            </select>

        </div>
        <div class="col-md-8 col-md-offset-2" >
            <table class="table table-striped" id="table">

            </table>
        </div> 
        
        <table id="tablexample" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                    <th>Type</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

fetch.php:

<?php 
if(isset($_GET['filter'],$_GET['filter2'])){
    $filter = trim($_GET['filter']);
    $filter2 = trim($_GET['filter2']);
    if(!empty($_GET['filter'] and !empty($_GET['filter2']))){
        $db = new SQLite3('tutorial.db');
        if($filter == 'all' and $filter2 == 'all'){
            $stmnt = $db->prepare('select * from staff');
        }else{
            if($filter == 'all'){
                $param = '';
            }else{
                $param = 'type = ' + $filter + " AND ";
            }
            if($filter2 == 'all'){
                $param2 = '';
            }else{
                $param2 = 'last_name = ' + $filter2;
            }
            // $stmnt = $db->prepare('select * from staff where type IN :type AND last_name IN :last_name');
            $stmnt = $db->prepare('select * from staff where '+$param+$param2);
            // $stmnt->bindParam(':type', $filter);
            // $stmnt->bindParam(':last_name', $filter2);
        }
        $result = $stmnt->execute();
        $final = array();
        while ($row = $result->fetchArray()) {
            $each = array(
                'id'=>$row['id'],
                'fname'=>$row['first_name'],
                'lname'=>$row['last_name'],
                'type'=>$row['type']
            );
            array_push($final,$each);
        }
        echo json_encode($final);
    }
}
?>

粘贴的代码是我最新的版本。我尝试过分解每个WHERE子句，使传递的$stmnt更容易控制。无论如何，代码不工作，原因不明。
更新：
我稍微修改了fetch.php，但是仍然没有任何结果。

if(isset($_GET['filter'],$_GET['filter2'])){
    $filter = trim($_GET['filter']);
    $filter2 = trim($_GET['filter2']);
    if((!empty($_GET['filter']) and !empty($_GET['filter2']))){
        $db = new SQLite3('tutorial.db');
        if($filter == 'all' and $filter2 == 'all'){
            $stmnt = $db->prepare('select * from staff');
        }else{
            $param = 'type = ' . $filter;
            $param2 = 'last_name = ' . $filter2;
            if($filter == 'all'){
                if($filter2 == 'all'){
                    // skipped
                }else{
                    $stmnt = $db->prepare('select * from staff where ' . $param2);
                }
            }else{
                if($filter2 == 'all'){
                    $stmnt = $db->prepare('select * from staff where ' . $param);
                }else{
                    $stmnt = $db->prepare('select * from staff where ' . $param . ' AND ' . $param2);
                }
            }
        }
        $result = $stmnt->execute();
        $final = array();
        while ($row = $result->fetchArray()) {
            $each = array(
                'id'=>$row['id'],
                'fname'=>$row['first_name'],
                'lname'=>$row['last_name'],
                'type'=>$row['type']
            );
            array_push($final,$each);
        }
        echo json_encode($final);
    }
}
?>```

javascript 对于多个下拉选项( AJAX 、JQuery)，未显示DataTable值

1条答案

相关问题

热门标签

最新问答