<div class="row" style="margin-top: 20x;">
    <div class="col-md-10" style="margin-top: 30px;">
        <h6 class="bg-light p-2">Général</h6>
        <table  id="table" 
                class="table-striped table-hover table-sm" 
                data-toggle="table"
                data-flat="true"
                data-sort-name="ActifOn"
                data-sort-order="desc"
                data-url="/json.php?jsonData=stats-general">
            <thead>
                <tr>
                    <th data-sortable="true" data-field="Lieu" data-filter-control="select">Etablissement</th>
                    <th data-sortable="true" data-field="ActifOn" data-filter-control="select">Effectif</th>
                    <th data-sortable="true" data-field="Femme" data-filter-control="select">Femme</th>
                    <th data-sortable="true" data-field="Homme" data-filter-control="select">Homme</th>
                    <th data-sortable="true" data-field="PourcentageFemme" data-formatter="formatPourcentageFemme" data-filter-control="select">% Femme</th>
                    <th data-sortable="true" data-field="PourcentageHomme" data-formatter="formatPourcentageHomme" data-filter-control="select">% Homme</th>
                    <th data-sortable="true" data-field="ContratOn" data-filter-control="select">Contrats actifs</th>
                    <th data-sortable="true" data-field="ContratOff" data-filter-control="select">Contrats suspendus</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script>
    function formatPourcentageFemme(value, row) {
        return row.PourcentageFemme + "%";
    }

    function formatPourcentageHomme(value, row) {
        return row.PourcentageHomme + "%";
    }
</script>