Hello, good afternoon.
I'm a beginner in Jquery, and I'm trying to present in my datatable, a filter that, by clicking the Radio Option, filter only the records of that Value.
Ex: When I click on Radio with Value "Active", the javascript function shows only those in the datatable that have this status, but I do not know where I am going, could someone give me a light?
var oTable;
var cRotina = '';
$(document).ready(function() {
$(".btn-group .btn").click(function() {
var inputValue = $(this).find("input").val();
if (inputValue != 'all') {
var target = $('table tr[data-status="' + inputValue + '"]');
$("table tbody tr").not(target).hide();
target.fadeIn();
} else {
$("table tbody tr").fadeIn();
}
});
// Changing the class of status label to support Bootstrap 4
var bs = $.fn.tooltip.Constructor.VERSION;
var str = bs.split(".");
if (str[0] == 4) {
$(".label").each(function() {
var classStr = $(this).attr("class");
var newClassStr = classStr.replace(/label/g, "badge");
$(this).removeAttr("class").addClass(newClassStr);
});
}
oTable = $('#tabela_rotinas').DataTable({
"bJQueryUI": true,
"bProcessing": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers",
"bStateSave": false,
"sAjaxDataProp": "server",
"contentType": "application/json",
"paging": false,
"sAjaxSource": "http://192.168.222.252:8082/WSSERVICES",
"sServerMethod": "GET",
"searching": false,
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
"dataType": "json",
"type": "GET",
"url": sSource,
"data": {
cRotina: cRotina
},
"success": fnCallback
});
},
"aoColumnDefs": [{
"aTargets": [1],
"mRender": function(data, type, full) {
if (data == "Executando") {
return '<tr data-status="active"><td><span class="label label-success">' + data + '</span></td></tr>';
} else if (data == "Parado") {
return '<tr data-status="expired"><td><span class="label label-danger">' + data + '</span></td></tr>';
} else if (data == "Inactive") {
return '<tr data-status="inactive"><td><span class="label label-warning">' + data + '</span></td></tr>';
}
}
}],
"aoColumns": [{
"mData": "nome"
},
{
"mData": "status"
},
{
"mData": "local"
},
{
"mData": "porta"
}
],
"oLanguage": {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLoadingRecords": '<center><i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span></center>',
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
}
});
});
setInterval(function() {
oTable.ajax.reload();
}, 60000);<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Serviços <b>Protheus</b></h2>
</div>
<div class="col-sm-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" name="status" value="all" checked="checked"> Todos
</label>
<label class="btn btn-success">
<input type="radio" name="status" value="active"> Executando
</label>
<label class="btn btn-warning">
<input type="radio" name="status" value="inactive"> Em Pausa
</label>
<label class="btn btn-danger">
<input type="radio" name="status" value="expired"> Parados
</label>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover" id="tabela_rotinas">
<thead>
<tr>
<th>NOME</th>
<th>STATUS</th>
<th>LOCAL</th>
<th>PORTA</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>