laravel 选中不同的单选按钮时重新加载不同的内容

Question

我正在处理一个页面，该页面有两个单选按钮和一个 table 填充了来自控制器的数据。 table 中显示的数据来自两个不同的类别。现在我想确保当用户选择不同的单选按钮时它只显示此按钮的类别而不是两个类别这是我的尝试

这是检索数据的控制器方法

public function Data(){

    $data = App\Equations::get();


    return array('aaData'=>$data);
}

这里是我如何使用 Ajax

在视图中接收它

var table = $('#table-active').DataTable({
        responsive: {
        details: {
           type: 'column',
           target: -1
           }
        },
        ajax:{"url" : "datatblejson",type:"get",data:{_token: $('meta[name="csrf-token"]').attr('content')}},
        buttons: {
            dom: {
                button: {
                    className: 'btn btn-default'
                }
            },
            buttons: [
                 {
                    extend: 'colvis',
                    text: '<i class=icon-loop3></i>',
                    className: 'btn btn-default',
                    action: function ( e, dt, node, config ) {
                        $.ajax({
                            url:'datatblejson', type: 'get', data: {_token: $('meta[name="csrf-token"]').attr('content')}    
                        });
                        $('#table-active').DataTable().ajax.reload();

                    }
                },
                {extend: 'copy',text: '<i title="Copy" class="icon-copy3"></i>'},
                {extend: 'csv' ,text: '<i title="Export to CSV sheet." class="icon-file-spreadsheet"></i>'},
                {extend: 'excel' ,text: '<i title="Export to excel sheet." class="icon-file-excel"></i>'},
                {extend: 'pdf' , text: '<i title="Export to PDF file." class="icon-file-pdf"></i>'},
                {extend: 'print', text: '<i title="Print" class="icon-printer"></i>'},
                {
                    extend: 'colvis',
                    text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
                    className: 'btn bg-blue btn-icon'
                }

            ]
        },
        columnDefs: [
            {
                className: 'control',
                orderable: false,
                targets:   -1
            }],
        deferRender: true,
        columns:[
        {"render": function ( type, full, data, meta ) {
            return '<a href="#" title="Open profile" class="profile" >'+data.name+'</a>';
        }},
        {"render": function ( type, full, data, meta ) {
            return '<input type="text" name='+data.id+' value='+data.value+'>';
        }},

        { "data": null, "defaultContent":'<center><ul class="icons-list"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu9"></i></a><ul class="dropdown-menu dropdown-menu-right">' +
         '<li><a href="#" class="history" ><i class="icon-file-stats"></i> Timeline</a></li>' +
         '<li><a href="#" class="profile" ><i class="icon-user"></i> Profile</a></li>' +
         '<li><a href="#" class="disconnect"><i class=" icon-file-eye"></i> Disconnect </a></li>' +
         '<li><a href="#" class="suspend"><i class=" icon-file-eye"></i> Suspend </a></li>' +
         '</ul> </li> </ul></center>'}
         //{ "data":null,"defaultContent":"" }
        ]
    });

这里是包含两个单选按钮的表单，我想在选中时更改它们table内容

<form action="{{url('update_price')}}" method="get" id="update">
            <div class="panel-heading">
                <h5 class="panel-title">Update Prices NOW!</h5>
            </div>



            <div class="row" style="margin-left: 5%">
              <h3>Please Choose a Category</h3>
              <input class="radio" id="radio-1" name="rd" type="radio" checked value="engineer">
              <label tabindex="4" for="radio-1" class="radio-label">Engineer</label>
              <br />
              <input class="radio" id="radio-2" name="rd" type="radio" value="user">
              <label tabindex="5" for="radio-2" class="radio-label">Normal User</label>
              <br />

            </div>
            <div class="panel-body">
            </div>
            <table class="table" width="100%" id="table-active">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Cost</th>

                    </tr>
                </thead>
            </table>
            <button id="button" style="margin-left: 45%;back"></button>
        </form>

Answer 1

您是否尝试过 jquery 中的某些函数来再次获取单击单选按钮时的数据？并向 ajax 请求添加类别参数..

像这样：

$('.radio').on('click', function(){
  var table = $('#table-active').DataTable({
    responsive: {
    details: {
       type: 'column',
       target: -1
       }
    },
    ajax:{"url" : "datatblejson",type:"get",data:{_token: $('meta[name="csrf-token"]').attr('content')}},
    buttons: {
        dom: {
            button: {
                className: 'btn btn-default'
            }
        },
        buttons: [
             {
                extend: 'colvis',
                text: '<i class=icon-loop3></i>',
                className: 'btn btn-default',
                action: function ( e, dt, node, config ) {
                    $.ajax({
                        url:'datatblejson', type: 'get', data: {_token: $('meta[name="csrf-token"]').attr('content'), category: 'id_category'}    
                    });
                    $('#table-active').DataTable().ajax.reload();

                }
            },
            {extend: 'copy',text: '<i title="Copy" class="icon-copy3"></i>'},
            {extend: 'csv' ,text: '<i title="Export to CSV sheet." class="icon-file-spreadsheet"></i>'},
            {extend: 'excel' ,text: '<i title="Export to excel sheet." class="icon-file-excel"></i>'},
            {extend: 'pdf' , text: '<i title="Export to PDF file." class="icon-file-pdf"></i>'},
            {extend: 'print', text: '<i title="Print" class="icon-printer"></i>'},
            {
                extend: 'colvis',
                text: '<i class="icon-three-bars"></i> <span class="caret"></span>',
                className: 'btn bg-blue btn-icon'
            }

        ]
    },
    columnDefs: [
        {
            className: 'control',
            orderable: false,
            targets:   -1
        }],
    deferRender: true,
    columns:[
    {"render": function ( type, full, data, meta ) {
        return '<a href="#" title="Open profile" class="profile" >'+data.name+'</a>';
    }},
    {"render": function ( type, full, data, meta ) {
        return '<input type="text" name='+data.id+' value='+data.value+'>';
    }},

    { "data": null, "defaultContent":'<center><ul class="icons-list"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu9"></i></a><ul class="dropdown-menu dropdown-menu-right">' +
     '<li><a href="#" class="history" ><i class="icon-file-stats"></i> Timeline</a></li>' +
     '<li><a href="#" class="profile" ><i class="icon-user"></i> Profile</a></li>' +
     '<li><a href="#" class="disconnect"><i class=" icon-file-eye"></i> Disconnect </a></li>' +
     '<li><a href="#" class="suspend"><i class=" icon-file-eye"></i> Suspend </a></li>' +
     '</ul> </li> </ul></center>'}
     //{ "data":null,"defaultContent":"" }
    ]
});
});

laravel 选中不同的单选按钮时重新加载不同的内容

laravel reloading different content when checking different radio button

php

ajax

datatables

laravel

laravel-5.2