Question

我想了解Laravel的一些知识。我想要一个班级下拉菜单，以便当用户选择任何班级并按下提交按钮时，与该特定班级相关的用户将显示在表格的下方...是否可以？

下面是我获取数据的代码，但是我希望这些数据引用HTML中的表，因为我还有更多想要的东西，而且我无法将这些东西添加到ajax表中

//我的ajax

$(document).ready(function() {

        $('select[name="students_class_id"]').on('change', function() {

            var classID = $(this).val();

            if(classID) {

                $.ajax({

                    url: '/myform/ajax/'+classID,

                    type: "GET",

                    dataType: "json",


                    success:function(data) {

                        var markup = '';

                        $.each(data, function(key, value) {
                             markup += '<tr> <td>' + value.id + '</td> <td>' + value.student_id + '</td> <td>' + value.first_name+ ' '  + value.last_name + '</td> <tr>';

                        });
                        $('table[id="studentsData"]').html(markup);
                    }

                });

            }

        });

    });

//控制器

 public function index(Request $request){
        $classes = StudentsClass::pluck('class_name', 'id')->all();
        return view('admin.students.attendance.index', compact( 'classes'));
    }

public function mytableAjax($id) {
    $students = Student::where('students_class_id', $id)->get();
    return json_encode($students);
}

//我的观点

    <select name="students_class_id" class="form-control" style="width:350px">

        <option value="">--- Select State ---</option>

        @foreach ($classes as $key => $value)

            <option value="{{ $key }}">{{ $value }}</option>

        @endforeach

    </select>



    <table id="studentsData" class="table table-striped table-bordered table-list-search">
        <thead>
        <tr>
            <th>#</th>
            <th>Student ID</th>
            <th>Student Name</th>
            <th>Attendance</th>
        </tr>
        </thead>

        <tbody>
            <tr>

                <td>
                    <div class="form-group">
                        <select class="form-control" id="gender">
                            <option>Present</option>
                            <option>Absent</option>
                            <option>Leave</option>
                        </select>
                    </div>
                </td>
            </tr>
        </tbody>

    </table>
    <a class="fas fa-folder-open btn btn-success float-right mb-4 mr-2"> Save</a>
</div>

Answer 1

检查以下代码，为每行添加attendance列：

$(document).ready(function() {
  $('select[name="students_class_id"]').on('change', function() {
    var classID = $(this).val();

    if (classID) {
      $.ajax({
        url: '/myform/ajax/' + classID,
        type: "GET",
        dataType: "json",
        success: function(data) {
          var attendance = `<div class="form-group">
                        <select class="form-control" id="gender" name="attendance[]">
                            <option>Present</option>
                            <option>Absent</option>
                            <option>Leave</option>
                        </select>
                    </div>`;
          var markup = '';

          $.each(data, function(key, value) {
            markup += '<tr> <td><input type="hidden" value="'+value.id+'" name="id[]">' + value.id + '</td> <td>' + value.student_id + '</td> <td>' + value.first_name + ' ' + value.last_name + '</td> <td> ' + attendance + '</td> <tr>';
          });

          $('#studentsData tbody').html(markup);

          var thead_markup += '<tr> <th>A</th> <th>B</th> <th>C</th> <td>D</th> <tr>';
          $('#studentsData thead').html(thead_markup);
        }
      });
    }
  });
});

Answer 2

这取决于您的代码，如果您使用的是ajax datatables api，那么这是一个类似的示例：

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

参考：datatables.net多重过滤器选择

如果您不使用datatables api且不希望使用ajax，请使用以下代码并根据需要进行更改：

 $("#selectDropdown").on("change", function () {
                    var value = $(this).val();
                    $("table tr").each(function (index) {
                        if (index != 0) {

                            $row = $(this);

                            var id = $row.find("td:first").text();

                            if (id.indexOf(value) != 0) {
                                $(this).hide();
                            }
                            else {
                                $(this).show();
                            }
                        }
                    });

                });

laravel中的一个下拉列表，用于过滤表数据

2 个答案: