Laravel Yajra DataTable - 使用提供的搜索参数通过 Ajax 获取内容

Question

在搜索了如何使用用户提供的搜索参数使用来自 ajax 调用的数据填充 Yajra DataTable 之后，我来到这个 page 获取官方文档。

它的代码sn-p如下...

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

但是，我无法从中做出任何事情。 $builder 变量来自哪里？如何使用从 Ajax 调用接收到的数据来填充表格？这个page 列出了没有详细信息的回调函数。

我需要什么

在从下拉列表#param 中选择一个值后，如何使用从搜索按钮#btn_search 发起的 Ajax 调用接收的数据填充我的数据表的完整示例。

为简单起见，我们假设表结构看起来像...

<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 变量是要查看信息的表的类 ID，

这是一个例子：

 <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 文档帮助。