<ul class="nav nav-tabs list-unstyled list-inline">
                            <li class="active"><a href="#home" data-du="" data-au="" data-page="1" data-toggle="tab" >Toutes </a></li>
                            <li><a href="#profile" data-du="<?php echo date('Y-m-d'); ?>" data-au="<?php echo date('Y-m-d'); ?>" data-page="1" data-toggle="tab">Aujourd'hui </a></li>
                            <li><a href="#messages" data-du="<?php echo date('Y-m-d', strtotime('+1 day')); ?>" data-au="<?php echo date('Y-m-d', strtotime('+1 day')); ?>" data-page="1" data-toggle="tab">Demain </a></li>
                            <li><a href="#settings" data-du="<?php $strtotime = (date('N') == 7) ? 'Saturday - '.date('N').' days' : 'Saturday'; echo date('Y-m-d', strtotime($strtotime)); ?>" data-au="<?php echo date('Y-m-d', strtotime('Sunday')); ?>" data-page="1" data-toggle="tab">Ce week end </a></li>
                        </ul>

// Recherche par date
	if(!empty($du)) {
	}
    $sql .= !empty($du) && !empty($au) ? " AND (DATE_FORMAT(`loisirs`.`date_debut_sortie`, '%Y-%m-%d') <= '".$du."' AND DATE_FORMAT(`loisirs`.`date_fin_sortie`, '%Y-%m-%d') >= '".$au."')" : NULL;
	// Fin de la recherche par date

    $req = $bdd->query($sql);
	
	

	
	// on affiche le nombre de sorties en fonction des filtres       
	$nb = $req->rowCount();
	if ($req->fetchColumn() > 0) {
		
		// on affiche le h1 en fonction de la region 
		$region_id = !empty($_REQUEST['region']) ? regionByUrl($_REQUEST['region']) : NULL; 
		$region_id = !empty($_SESSION['membre']['id_region']) && empty($_REQUEST['region']) ? $_SESSION['membre']['id_region'] : $region_id; 

		$h1 = $nb.' annonces pour sortir en ';
		$h1 .= !empty($_REQUEST['loisir']) ? $aLoisirs[$_REQUEST['loisir']]: NULL; // Le type de sortie
		$h1 .= !empty($region_id) ? $aRegion[$region_id] : NULL; // La région
		$h1 .= !empty($_REQUEST['departement']) ? '  '.$depts[$_REQUEST['departement']]. "</strong>" : NULL; // Le département

		$h1 .= !empty($du) ? ",  le <strong>" .date('d/m/Y', strtotime($du))."</strong>" : NULL; // La date choisis selon les filtres
		echo '<h1><i class="fa fa-chevron-right opt_green"></i><strong> '.$h1.'</strong></h1>'."\n";	
	
	}

// JavaScript Document
// On donne une action dès qu'on clique sur un lien des nav
$(document).ready(function(){
    $('.filter-tabs a, .page:not(.active)').on('click', function(e) {
				
        e.preventDefault(); // On annule le fait d'avoir cliqué sur le lien.
        var du = $(this).attr('data-du');
        var au = $(this).attr('data-au');
        var page = $(this).attr('data-page');
        chargerDonnees(du, au, page);
	});
});
// On déclare la fonction qui va aller chercher les données en base de données selon le bouton cliqué
function chargerDonnees(du, au, page) {
	
	var dep = $('#departement').val();
	var region = $('#departement').attr('data-region');
	var loisir = $('#loisir').val();
	var datetimepicker2 = $('#datetimepicker2').val();
	
    $.ajax({
        type: 'GET',
        url: 'include/rechercheAjax.php',
        data: 'du='+du+'&au='+au+'&page='+page+'&departement='+dep+'&region='+region+'&loisir='+loisir+'&date='+datetimepicker2,
        processData: true,
        async: false,
		

        beforeSend: function() {
            $('#bloc_page').html('Chargement en cours');
        },
        success: function (data) {
            $('#bloc_page').html(data);
            // On doit le rappeller car un nouveau bloc pagination a été créé
			
            $('.page:not(.active)').on('click', function(e) {
				
                e.preventDefault(); // On annule le fait d'avoir cliqué sur le lien.
                var du = $(this).attr('data-du');
                var au = $(this).attr('data-au');
                var page = $(this).attr('data-page');
                chargerDonnees(du, au, page);
            });
        }
    });
}