i'm working with jsf2, I need succeded to implement my datatable with collapsed behavior( parent then child rows). i write this is code html:
<h:panelGroup id="testListData">
<div class="col-sm-12">
<div class="group text-left">
<legend>
#{bundlesweb.rechercherPrestResultat}
<s:commandLink id="btnAjoutertest" idModal="popuptest"
mode="CREATE"
initialiser="#{recherchetestControllerAction.initAjoutertest()}"
style="btn btn-primary" onevent="afterAjax(data, false);masks();"
title="#{bundlesweb.btnAdd}">
<span class="fa fa-plus"></span>
</s:commandLink>
</legend>
<div class="table-responsive">
<table id="testList" class="display" style="width: 100%">
<thead>
<tr>
<th class="visible-lg visible-md visible-sm "
id="recherchertestDate">#{bundlesweb.rechercherDate}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestSemaine">#{bundlesweb.rechercherSemaine}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestHeureDeDebut">#{bundlesweb.rechercherHeureDeDebut}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestHeureDeFin">#{bundlesweb.rechercherHeureDeFin}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestTypeDeContrat">#{bundlesweb.rechercherTypeDeContrat}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestTypeDAbsence">#{bundlesweb.rechercherTypeDAbsence}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestMaisonDeJustice">#{bundlesweb.rechercherMaisonDeJustice}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestAPrester">#{bundlesweb.rechercherAPrester}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestPreste">#{bundlesweb.rechercherPreste}</th>
<th class="visible-lg visible-md visible-sm "
id="recherchertestAbsence">#{bundlesweb.rechercherAbsence}</th>
</tr>
</thead>
<ui:repeat id="testRepeat"
value="#{recherchetestControllerAction.testList}"
var="test">
<tbody class="clickable" data-toggle="collapse"
data-target="#group-of-rows-#{test.id}"
aria-expanded="false"
aria-controls="group-of-rows-#{test.id}">
<tr>
<td>#{test.datetest eq null ?
"":test.datetest}</td>
<td>#{test.semaine eq null ? "":test.semaine}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>#{test.aPresterParJour eq null ?
"":test.aPresterParJour}</td>
<td>#{test.presteParJour eq null ? "":
test.presteParJour}</td>
<td>#{test.absenceParJour eq null ? "":
test.absenceParJour}</td>
<td></td>
</tr>
</tbody>
<tbody id="group-of-rows-#{test.id}" class="collapse">
<ui:repeat id="testRepeat"
value="#{test.detailstestVO}"
var="detailtest">
<tr>
<td></td>
<td></td>
<td>#{detailtest.heureDebut eq null ? ""
:detailtest.heureDebut}</td>
<td>#{detailtest.heureFin eq null ? "":
detailtest.heureFin}</td>
<td>#{detailtest.typeContactLibre eq null ?
"":detailtest.typeContactLibre}</td>
<td>#{detailtest.typeAbsence.descritption eq null
? "":detailtest.typeAbsence.descritption}</td>
<td>#{detailtest.maisonJustice.division.libelle eq
null ? "": detailtest.maisonJustice.division.libelle}</td>
<td></td>
<td></td>
<td></td>
</tr>
</ui:repeat>
</tbody>
</ui:repeat>
</table>
<div style="padding-top: 5%; padding-left: 64%;">
<div class="col-sm-12">
<div class="col-sm-2">
<label>#{bundlesweb.recherchertestTotal}</label>
</div>
<div class="col-sm-2" style="padding-left: 4%;">
<h:inputText id="totaltestAPreste" style="width:74%;"
type="text"
value="#{recherchetestControllerAction.totalAPreste}"></h:inputText>
</div>
<div class="col-sm-2" style="padding-left: 8%;">
<h:inputText id="totaltestPreste" style="width:110%;"
type="text"
value="#{recherchetestControllerAction.totalPreste}"></h:inputText>
</div>
<div class="col-sm-2" style="padding-left: 12%;">
<h:inputText id="totaltestAbsence" type="text"
style="width:314%;"
value="#{recherchetestControllerAction.totalAbsence}"></h:inputText>
</div>
</div>
<div class="col-sm-12" style="padding-top: 2%;">
<div class="col-sm-2">
<label>#{bundlesweb.recherchertestSoldeHeure}</label>
</div>
<div class="col-sm-2" style="padding-left: 4%;">
<h:inputText id="totaltestSoldeHeure" style="width:74%;"
type="text"
value="#{recherchetestControllerAction.soldeHeure}"></h:inputText>
</div>
</div>
</div>
</div>
</div>
</div>
</h:panelGroup>
I want to add the filter functionality using js , i did this but is not working for me:
$(document).ready(function() {
inittestList();
});
function inittestList() {
const test_LIST = '#testList';
if ($.fn.DataTable.isDataTable(PRESTATION_LIST)) {
$(test_LIST).DataTable().destroy();
}
var details = [];
// $('#testList thead tr ').addClass('filters');
$('#testList thead tr') .clone(true)
.addClass('filters').appendTo('#prestationList thead ') ;
var testTable = $(test_LIST).DataTable({
lengthMenu:[5,10,25,50],
"columns": [null,null,null,null,null,null,null,null,null,null,null],
searching:true,
ordering:true,/* No ordering applied by DataTables during initialisation */
paging:true ,
orderCellsTop: true,
fixedHeader: true,
initComplete: function ()
{ // For each column
var api = this.api();
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('change', function (e) {
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})';
//$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
})
.on('keyup', function (e) {
e.stopPropagation();
$(this).trigger('change');
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
}
});
}
How to implement the filter functionnality for the child row ? any help thanks in advance.