如何在选择选项中过滤数据并将其显示为报告（php：laravel框架）

Question

How can I filter the data in select option and display it in another table as a report. i do not know how to use JavaScript.

Below is my report.blade.php

<table width="100%">
    <div id="DrpDwn" align="center">
        <h1> report</h1> <br/>
        Programme:<select id="program">
            @foreach($profiles as $profile)
                <option>{{$profile->program}}</option>
            @endforeach
        </select><br>
        Faculty:<select id="faculty">
            @foreach($profiles as $profile)
                <option> {{$profile->faculty}}</option>
            @endforeach
        </select>
    </div>
    <br />
    <table id="tableID" border="2" width="100%">
        <tr>
            <td class="student_id" width="15%">Student id </td>
            <td class="name" width="30%">name</td>
            <td class="program" width="30%"> Program</td>
            <td class="faculty" width="25%">Faculty </td>
        </tr>
        @foreach($profiles as $profile)
        <tr>
            <td class="student_id" width="15%">{{$profile->student_id }}</td>
            <td class="name" width="30%">{{$profile->student_name }}</td>
            <td class="program" width="30%"> {{$profile->program }}</td>
            <td class="faculty" width="25%">{{$profile->faculty }} </td>
        </tr>
        @endforeach
    </table>
    </table>

i want like this.. when i click programme: diploma multimedia, it will show data that related to it only. (sorry for my broken english)

Answer 1

Firstly: you should make a function in your controller which return all tables rows with data from database:

function getTableRows($faculty)
{
$rows = Student:::where('faculty', '=', $faculty)
foreach ($rows as $row)
{

echo "<tr><td>".$row->student_id."</td><td>".$row->name."</td><td>".$row->faculty."</td></tr>";
}
}

Then you will make route for this function in route.PHP in laravel,and call this function with ajax in onchange event of select:

 $(document).ready(function() { 

$("#faculty").change(function() { 
     //your route
     $.get("student/getTableRows/"+$(this).val(), function(html) { 
         // append the "ajax'd" data to the table body 
         $("#tableID tbody").append(html); 

    }); 

}); 
});

Also you should ajax table rows, or dynamic ajax table, jquery ajax table.

Answer 2

<select id = 'program'>      </select>
<div id = 'tableID'></div>

Now in your javascript page

$("#program").bind("change", function() {
    $.ajax({
        type: "GET", 
        url: "path/to/server/script.php",
        data: "id="+$("#program").val(),
        success: function(html) {
            $("#tableID").html(html);
        }
    });
    });