Раскрывающийся список в фильтре данных таблицы

Question

Я хочу кое-что узнать в Ларавеле. Я хочу раскрывающийся список классов, поэтому, когда пользователь выбирает какой-либо класс и нажимает кнопку отправки, пользователи, относящиеся к этому конкретному классу, будут отображаться ниже в таблице ... Возможно ли это?

Ниже приведен код, который я сделал для получения данных, но я хочу, чтобы эти данные ссылались на мою таблицу в HTML, потому что есть что-то еще, что я хочу, и я не могу добавить эти вещи в таблицу 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 multi filter select

Если вы неиспользуя 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();
                            }
                        }
                    });

                });