laravel reloading different content when checking different radio button - php

Question

i'm working on a page having two radio buttons and a table filled with data from the controller. the data shown in the table are from two different categories.
now i want to make sure that when user chooses a different radio button it displays just the category of this button not both categories
here is my try
this is the Controller method that retrieves the data
public function Data(){
$data = App\Equations::get();
return array('aaData'=>$data);
}
and here how i receive it in the view using 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"><i class="icon-menu9"></i><ul class="dropdown-menu dropdown-menu-right">' +
'<li></i> Timeline</li>' +
'<li></i> Profile</li>' +
'<li><i class=" icon-file-eye"></i> Disconnect </li>' +
'<li><i class=" icon-file-eye"></i> Suspend </li>' +
'</ul> </li> </ul></center>'}
//{ "data":null,"defaultContent":"" }
]
});
and here is the form that contains the two radio buttons that i want to change table content when checked
<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

have you tried with some function in jquery to get again the data when the radio button clicked? and adding a category parameter to the ajax request..
Something like this:
$('.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"><i class="icon-menu9"></i><ul class="dropdown-menu dropdown-menu-right">' +
'<li></i> Timeline</li>' +
'<li></i> Profile</li>' +
'<li><i class=" icon-file-eye"></i> Disconnect </li>' +
'<li><i class=" icon-file-eye"></i> Suspend </li>' +
'</ul> </li> </ul></center>'}
//{ "data":null,"defaultContent":"" }
]
});
});