Laravel Yajra DataTable - выборка контента через Ajax с предоставленными параметрами поиска

Question

После поиска того, как заполнить таблицу данных Yajra данными из вызова ajax с предоставленными пользователем параметрами поиска, я пришел на эту страницу для официальной документации.

Он имеет следующий фрагмент кода ...

$builder->ajax([
    'url' => route('users.index'),
    'type' => 'GET',
    'data' => 'function(d) { d.key = "value"; }',
])

Однако я ничего не могу из этого сделать.Откуда берется переменная $builder?Как использовать данные, полученные из вызова Ajax, для заполнения таблицы?На этой странице перечислены функции обратного вызова без подробностей.

Что мне нужно

Полноценный пример того, как заполнить мою таблицу данныхс данными, полученными от вызова Ajax, инициированного кнопкой поиска #btn_search после выбора значения из раскрывающегося списка #param.

Для простоты, давайте предположим, что структура таблицы выглядит как ...

<select id="param">
    <option value="">Select </option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<button id="btn_search" value="Search">Search</button>

<table>
    <thead>
        <tr>
            <th>Serial</th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
</table>

Метод контроллера, который возвращает данные ...

<?php

public function getBasicData()
{
    $users = User::select(['id','name','email','address']);

    return Datatables::of($users)->make();
}

Пользователь выбирает значение из раскрывающегося списка и нажимает кнопку поиска. В реальном сценарии есть несколько выпадающих списков для сбора параметров поиска .Соответствующий код jQuery: ...

$("#btn_search").click(function() {
    var param_value = $("#param").val().trim();

    //  make ajax call probably 
});

Как мне сделать вызов Ajax внутри обработчика кликов и заполнить таблицу данных полученными данными?

Answer 1

Переменная $ builder - это идентификатор класса таблицы, которая будет просматривать информацию,

Вот пример:

 <table id="data" class="table table-bordered table-hover" >

     <thead>         
             <tr class="table-head">
                            <th>#</th>
                            <th>namr</th>
                            <th>email</th>
                            <th>date</th>
                            <th>auth</th>
                            <th>control</th>
                            <th>control</th>
                        </tr>
                        </thead>
                        <tbody>


                        </tbody>
                        <tfoot>
                               <th> </th>                         
                            <th> </th>
                            <th> </th>
                            <th> </th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tfoot>
                    </table>

и это код ajax

 <script type="text/javascript">

    var lastIdx = null;

    var table = $('#data').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ url('/adminpanel/users/data') }}',
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
            {data: 'admin', name: 'isadmin'},
            {data: 'edit', name: 'edit', orderable: false, searchable: false},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],

        "language": {
            "url": "{{ Request::root()  }} /admin/cus/Arabic.json"
        },
        "stateSave": false,
        "responsive": true,
        "order": [[0, 'asc']],
        "pagingType": "full_numbers",
        aLengthMenu: [
        [25, 50, 100, 200, -1],
        [25, 50, 100, 200, "All"]
        ],
    iDisplayLength: 25,
        fixedHeader: true,

        "oTableTools": {
            "aButtons": [{
                    "sExtends": "csv",
                    "sButtonText": "ملف إكسل",
                    "sCharSet": "utf16le"
                },
                {
                    "sExtends": "copy",
                    "sButtonText": "نسخ المعلومات",
                },
                {
                    "sExtends": "print",
                    "sButtonText": "طباعة",
                    "mColumns": "visible",


                }
            ],

            "sSwfPath": "{{ Request::root()  }} /website/admin/cus/copy_csv_xls_pdf.swf"
        },

        "dom": '<"pull-left text-left" T><"pullright" i><"clearfix"><"pull-right text-right col-lg-6" f > <"pull-left text-left" l><"clearfix">rt<"pull-right text-right col-lg-6" pi > <"pull-left text-left" l><"clearfix"> '
        ,initComplete: function ()
        {
            var r = $('#data tfoot tr');
            r.find('th').each(function(){
                $(this).css('padding', 8);
            });
            $('#data thead').append(r);
            $('#search_0').css('text-align', 'center');
        }

    });

    table.columns().eq(0).each(function(colIdx) {
        $('input', table.column(colIdx).header()).on('keyup change', function() {
            table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
        });




    });



    table.columns().eq(0).each(function(colIdx) {
        $('select', table.column(colIdx).header()).on('change', function() {
            table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
        });

        $('select', table.column(colIdx).header()).on('click', function(e) {
            e.stopPropagation();
        });
    });


    $('#data tbody')
            .on( 'mouseover', 'td', function () {
                var colIdx = table.cell(this).index().column;

                if ( colIdx !== lastIdx ) {
                    $( table.cells().nodes() ).removeClass( 'highlight' );
                    $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
                }
            } )
            .on( 'mouseleave', function () {
                $( table.cells().nodes() ).removeClass( 'highlight' );
            } );


</script>

это полная таблица с примером ajax, как в справке по документации Yajara.