diff --git a/routes/pages/index.js b/routes/pages/index.js
index 6d027a1..1080e43 100644
--- a/routes/pages/index.js
+++ b/routes/pages/index.js
@@ -67,14 +67,15 @@ router.get('/project/:id', async (req, res, next) => {
   });
 });
 
-// jobs page
-router.get('/jobs', topBar.getInfo, jobs.getJobs, projects.getProjects, (req, res) => {
+// jobs page with id of a project
+router.get('/jobs/:id', topBar.getInfo, projects.getProjects, projects.getJobsOfProject, (req, res) => {
   res.render('pages/jobs', {
+    id: req.params.id,
     topBar: req.topBar,
-    filter: req.query.filter,
+    filter: req.params.id,
     projects: req.projects,
-    data: req.jobs_data,
-    columns: req.jobs_columns,
+    data: req.jobs_of_project_data,
+    columns: req.jobs_of_project_columns,
     jobs: req.jobs,
     base: req.app.get('baseUrl'),
     api: req.app.get('apiUrl'),
@@ -82,6 +83,30 @@ router.get('/jobs', topBar.getInfo, jobs.getJobs, projects.getProjects, (req, re
   });
 });
 
+// jobs page
+router.get('/jobs', topBar.getInfo, projects.getProjects, (req, res) => {
+  res.render('pages/jobs', {
+    id: null,
+    topBar: req.topBar,
+    filter: null,
+    projects: req.projects,
+    data: '[]',
+    columns: JSON.stringify([
+      { title: 'Id', data: 'job_id' },
+      { title: 'Nom', data: 'job_name' },
+      { title: 'Statut', data: 'job_status' },
+      { title: 'Code retour', data: 'job_return_code' },
+      { title: 'Date début', data: 'date' },
+      { title: 'Heure début (UTC)', data: 'hms' },
+      { title: 'Durée (s)', data: 'duree' },
+    ]),
+    jobs: [],
+    base: req.app.get('baseUrl'),
+    api: req.app.get('apiUrl'),
+    version: req.app.get('version'),
+  });
+});
+
 // projects page
 router.get('/projects', topBar.getInfo, projects.getProjects, (req, res) => {
   res.render('pages/projects', {
diff --git a/views/partials/tab/jobs_tab.ejs b/views/partials/tab/jobs_tab.ejs
index 78a58db..621e773 100644
--- a/views/partials/tab/jobs_tab.ejs
+++ b/views/partials/tab/jobs_tab.ejs
@@ -6,10 +6,10 @@
     <div class="btn-toolbar ml-1 mb-3"> 
       <div class="input-group input-group-sm">
         <div class="input-group-prepend">
-          <label class="input-group-text">Filtrer par projets</label>
+          <label class="input-group-text">Selectionner un projet</label>
         </div>
         <select class="custom-select" name="projects" id="project-select">
-          <option value="-1">-- Tous les projets --</option>
+          <option value="-1">--  --</option>
           <% projects.forEach(function( project ){ %>
             <option value="<%= project.project_id %>"  <%if (filter && filter==project.project_id) {%>  selected <%}%> > 
               <%= project.project_id %> - <%= project.project_name %>
@@ -112,22 +112,13 @@ $(document).ready(function() {
     $("div.toolbar_tab").append(button);
     
     var table = $('#dataTable').DataTable();
-    $('#project-select').change( function() {
-        table.draw();
-    } );
+    $('#project-select').change(function() {
+      var projectId = $(this).val();
+      if (projectId !== "-1") {
+        window.location.href = "<%= base %>/jobs/" + projectId;
+      }
+    });
 
 } );
 
-  $.fn.dataTable.ext.search.push(
-    function( settings, data, dataIndex ) {
-        var project_id = $('#project-select').val()
-        if(project_id == -1){
-          return true;
-        }else if(data[7] === project_id){
-          return true
-        }else{
-          return false
-        }
-    }
-);
 </script>
\ No newline at end of file