php - css non appliqué sur changement de n° de page

Version imprimable

2 pièce(s) jointe(s)

Salut,

Je poste ici mon probleme en espérant que je sois au bon endroit.

J'ai une page php avec une recherche multicritère avec notamment une recherche sur une plage de date. Je dois ajouter par la suite d'autre critère en plus comme un nom de client via une combobox.

Lorsque ma page se charge pas de souci, le css est appliqué sans probleme sur la premiere page. (2018-05-14_153254_affichage_page1_ok.jpg)

Par contre, lorsque je clique sur la page 2 là, je perds toute ma mise en forme, mes champs de texte, mes combobox, ect.. Bref le css ne s'applique pas. (2018-05-14_153358_passage_page2.jpg)

Je vous mets en dessous le code de mon projet:

index.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<?php header('Content-type: text/html; charset=iso-8859-1'); 
include 'db_connect.php';
 
//remplissage de la comboclient
$qry_clt="select id,name from products where isactive = '1'";
$data = $conn->prepare($qry_clt);
$data->execute();
 
//remplissage Severite
$qry_sev="select id, value from bug_severity";
$sev_data = $conn->prepare($qry_sev);
$sev_data->execute();
 
$conn=null;
 
?>
<!DOCTYPE HTML>
<html>
    <head>
        <title>Tickets - Demo</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script type = "text/javascript" src="js/bootstrap.min.js"></script>
        <script type = "text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type = "text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type = "text/javascript" src="js/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script>
    $(document).ready(function(){
        $.datepicker.setDefaults({
            dateFormat: 'yy-mm-dd',
            changeYear:true,
            changeMonth:true
        });
        $(function(){
            $("#from_date").datepicker();
            $("#to_date").datepicker();
        });
        $('#filterbutton').click(function(){
 
            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();
 
            if(from_date != '' && to_date != '')
            {
                 $.ajax({  
                      url:"fetch_data.php",  
                      method:"POST",  
                      data:{from_date:from_date, to_date:to_date},  
                      success:function(data)  
                      {  
                          $('#table_data').html(data);  
                      }  
 
                 });  
            }  
            else  
            {  
                 alert("Please Select Date");  
            }
        });
    });
</script>
 
</head>
<body>
 
<h1>LISTE DES TICKETS-TEST<br></h1>
 
	<label>Du:</label><input id="from_date" type="text" class="datepicker" name="from_date" value= ""> &nbsp;
	<label>Au:</label><input id="to_date" type="text" class="datepicker" name="to_date" value=""> &nbsp;&nbsp;
 
	<!-- Combo client -->
	<select id="cbclient" name="cbclient">
    <option value = "" disabled selected>---Select---</option>
      <?php
      while($row=$data->fetch(PDO::FETCH_ASSOC)){  
      echo "<option value=".$row['id'].">".$row['name']."</option>";
        	}       
      ?>
    </select>
 
	<!-- severite -->
	<select id="cbseverite" name="cbseverite">
    <option value = "" disabled selected>---Select---</option>
      <?php
        while($row=$sev_data->fetch(PDO::FETCH_ASSOC)){  
            echo "<option value=".$row['id'].">".$row['value']."</option>";
        }       
      ?>
    </select>
	<input id="filterbutton" type="submit" value="Filtrer" name="filterbutton">
 
<div id='retrieved-data' style='height:15em;'>
    <!--
   affichage des datas.
    -->
    <img src="images/ajax-loader.gif" />
</div>
 
<script type = "text/javascript">
 
$(function(){
    // affiche la premiere page
    getdata(1);
});
 
//fonction getdata(pageno){
function getdata(pageno){
    // source de données
    var targetURL = 'fetch_data.php?page=' + pageno;
     $('#retrieved-data').html('<img src="images/ajax-loader.gif" />');   
     // load to show new data
     $('#retrieved-data').load(targetURL).hide().fadeIn('slow');   
}
</script> 
</body>
</html>

fetch_data.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<?php
header('Content-type: text/html; charset=iso-8859-1');
 
 
//fetch.php
//include
include 'db_connect.php';
include 'pagination.php';
 
$startdate="";
$enddate="";
$urlparam="";
 
//********************** DEBUT SQL BUILD QUERY ***********************************************
 
$sql = "SELECT
    `bugs_activity`.`bug_id` AS `bug_id`,
    `products`.`name` AS `client`,
    `bugs`.`cf_platforme` AS `plateforme`,
    `bugs_activity`.`bug_when` AS `bug_when`,
    `bugs`.`product_id` AS `product_id`,
    `bug_severity`.`id` AS `severity_id`,
    `bugs`.`bug_severity` AS `severité`,
     COUNT(*) AS count
FROM
     `bugs_activity`,
     `bug_severity`,
     `bugs`,
     `products`
WHERE
     `bugs`.`product_id` = `products`.`id`
     AND  `bug_severity`.`value` = `bugs`.`bug_severity`
     AND `bugs`.`bug_id` = `bugs_activity`.`bug_id`
     AND `bugs_activity`.`bug_when` IS NOT NULL
     AND `bugs_activity`.`added` = 'REOPENED'";
 
//debut gestion des dates
if(!empty($_GET['from_date'])){
        $startdate= $_GET['from_date'];
}
 
 
if(!empty($_GET['to_date'])){
    $enddate=$_GET['to_date'];
}
 
// si la date est vide on met par défaut
// date debut: date jour -7
// date fin: date jour +7
 
//gestion si les dates sont vides
if(empty($_GET['from_date'])){
    $startdate=date('Y-m-d', strtotime("-7 days"));
}
 
if(empty($_GET['to_date'])){
     $enddate=date('Y-m-d', strtotime("+7 days"));
}
 
 
$sql .=" AND `bugs_activity`.`bug_when` BETWEEN '$startdate' and '$enddate'";
 
//client
if(!empty($_GET['client'])){
    $sql .= "AND  `products`.`name` = '$client'";
}
 
//severité
if(!empty($_GET['severité'])){
    $sql .= "AND `bug_severity`.`value` = '$severite'";
}
 
//fin de requete
$sql .=" GROUP BY `bugs_activity`.`bug_id`";
$sql .=" ORDER BY `bugs_activity`.`bug_id`, `bugs_activity`.`bug_when` ASC";
 
//********************** FIN SQL BUILD QUERY ***********************************************
 
//*********************** CONSTRUCTION DE LA PAGE ******************************************
 
$urlparam="from_date={$startdate}&to_date={$enddate}";
 
$pager = new PS_Pagination($conn, $sql, 10, 5, $urlparam);
$pager->setDebug(true);
$rs = $pager->paginate();
 
//calcul du nb de lignes que retourne la requete
$num = $rs->rowCount();
 
if($num >= 1 ){
    echo "<div id=table_data>";
    echo "<table id=table_data class=data-table>";
    echo "<thead>";
    echo "<tr>";
        echo "<th>BUG_ID</th>";
        echo "<th>PRODUCT_ID</th>";
        echo "<th>CLIENT</th>";
        echo "<th>PLATEFORME</th>";
        echo "<th>SEVERITY_ID</th>";
        echo "<th>SEVERITE</th>";
        echo "<th>DATE</th>";
        echo "<th>NB_REOPENED</th>";
    echo "</tr>";
    echo "</thead>";
    echo "<tbody>";
 
    while ($row = $rs->fetch(PDO::FETCH_ASSOC)){
        echo "<tr class='data-tr' align='center'>";
        echo "<td><a href=https://support.datalog-finance.com/show_bug.cgi?id={$row["bug_id"]}> {$row["bug_id"]}</a></td>";
        echo "<td>{$row["product_id"]}</td>";
        echo "<td>{$row["client"]}</td>";
        echo "<td>{$row["plateforme"]}</td>";
        echo "<td>{$row["severity_id"]}</td>";
        echo "<td>{$row["severité"]}</td>";
        echo "<td>{$row["bug_when"]}</td>";
        echo "<td>{$row["count"]}</td>";
        echo "</tr>";
    }
    echo "</tbody>";
    echo "</table>";
    echo "</div>";
}else{
    // si pas de données
    echo "Pas de données disponible!";
}
 
echo "<div class='page-nav'>";
    // Affiche n° de page
    echo $pager->renderFullNav();
echo "</div>";
 
 
 
//fermeture de la connexion à mysql
$conn=null;
 
?>

Si besoin du code gérant la pagination pas de soucis.

Merci pour votre aide,

14/05/2018, 16h10
Celira

Vu les 2 captures d'écran, je dirais que tu fais une redirection vers un script qui est censé être appelé par ajax.
Mais comme le code qui génère la pagination est fait par l'appel à la méthode echo $pager->renderFullNav();, je ne peux pas vraiment en dire plus.
14/05/2018, 16h26
bonjourajax

Bonjour,
Pour pallier à ce probleme je te propose :

solution 1, remplacer les id par des class (je sais pas pourquoi, chez moi ça fonctionne )

solution 2, remettre le css via js apres chaque chargement de page

c'est possible d'avoir le fichier css au cas ou?

Voilà le code qui gère la pagination si ca peut aider:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
 
Salut Celira, 
 
Voila le code qui gère la pagination: 
 
<?php
class PS_Pagination {
    var $php_self;
    var $rows_per_page = 10; //Nombre de ligne par page
    var $total_rows = 0; //Nb lignes retournées par la requete
    var $links_per_page = 5; //Nombre de liens à afficher par page
    var $append = ""; //Paramètres a ajouter aux liens
    var $sql = "";
    var $debug = true; 
    var $conn = false;
    var $page = 1;
    var $max_pages = 0;
    var $offset = 0;
 
    /**
     * Constructor
     *
     * @param resource $connection connection mysql
     * @param string $sql requete
     * @param integer $rows_per_page Nb de lignes à retourner par page.10 par défaut
     * @param integer $links_per_page nb liens par page -> Défaut 5
     * @param string $append paramètres à ajouter aux liens
     */
 
    function PS_Pagination($connection, $sql, $rows_per_page = 10, $links_per_page = 5, $append) {
 
        $this->conn = $connection;
        $this->sql = $sql;
        $this->rows_per_page = (int)$rows_per_page;
        if (intval($links_per_page ) > 0) {
            $this->links_per_page = (int)$links_per_page;
        } else {
            $this->links_per_page = 5;
        }
        $this->append = $append;
        $this->php_self = htmlspecialchars($_SERVER['PHP_SELF'] );
        if (isset($_GET['page'] )) {
            $this->page = intval($_GET['page'] );
        }
    }
 
    /**
     * Execute la requete SQL et Initialise les variables
     *
     * @access public
     * @return resource
     */
    function paginate() {
        //retourne le nb total de ligne
        $all_rs = $this->conn->prepare( $this->sql );
        $all_rs->execute();
 
        if (! $all_rs) {
            if ($this->debug)
                echo "Requete SQL incorrecte. Vérifier la requete.<br /><br />Erreur: " . mysql_error();
                return false;
        }
        $this->total_rows = $all_rs->rowCount();
 
        //Retourne FALSE si pas de résultat
        if ($this->total_rows == 0) {
            if ($this->debug)
                echo "Pas de données.";
                return FALSE;
        }
 
        //Nb de pages max.
        $this->max_pages = ceil($this->total_rows / $this->rows_per_page );
        if ($this->links_per_page > $this->max_pages) {
            $this->links_per_page = $this->max_pages;
        }
 
        //Si num de page invalide -> redirige vers page 1
        if ($this->page > $this->max_pages || $this->page <= 0) {
            $this->page = 1;
        }
 
        //Calcul OFFSET        
        $this->offset = ($this->page - 1) * $this->rows_per_page;
        //retour result set
        $query = $this->sql . " LIMIT {$this->offset}, {$this->rows_per_page}";
        //$query = $this->sql . " LIMIT {$this->offset}, 10";
        //debug query
        //echo $query;
 
        $rs = $this->conn->prepare( $query );
        $rs->execute();
 
        if (! $rs) {
            if ($this->debug)
                echo "Erreur de pagination. Vérifiez la requete.<br /><br />Error Returned: " . mysql_error();
                return false;
        }
        return $rs;
    }
 
    /**
     * Affiche le lien de la premiere page
     *
     * @access public
     * @param string $tag Text string to be displayed as the link. Defaults to 'First'
     * @return string
     */
    function renderFirst($tag = 'First') {
        if ($this->total_rows == 0)
            return FALSE;
 
            if ($this->page == 1) {
                return "$tag ";
            } else {
                return '<a href="' . $this->php_self . '?page=1&' . $this->append . '">' . $tag . '</a> ';
                //default to one (1)
                //return " <a href='javascript:void(0);' OnClick='getdata( 1 )' title='First Page'>$tag</a> ";
            }
    }
 
    /**
     * affiche le lien de la derniere page
     *
     * @access public
     * @param string $tag Text string to be displayed as the link. Defaults to 'Last'
     * @return string
     */
    function renderLast($tag = 'Last') {
        if ($this->total_rows == 0)
            return FALSE;
 
            if ($this->page == $this->max_pages) {
                return $tag;
            } else {
                $pageno = $this->max_pages;
                //return " <a href='javascript:void(0);' OnClick='getdata( $pageno )' title='Last Page'>$tag</a> ";
                return ' <a href="' . $this->php_self . '?page=' . $this->max_pages . '&' . $this->append . '">' . $tag . '</a>';
 
            }
    }
 
    /**
     * Affiche le lien "Next"
     *
     * @access public
     * @param string $tag Text string to be displayed as the link. Defaults to '>>'
     * @return string
     */
    function renderNext($tag = '&gt;&gt;') {
        if ($this->total_rows == 0)
            return FALSE;
 
            if ($this->page < $this->max_pages) {
                $pageno = $this->page + 1;
                //return " <a href='javascript:void(0);' OnClick='getdata( $pageno )' title='Next Page'>$tag</a> ";
                return '<a href="' . $this->php_self . '?page=' . ($this->page + 1) . '&' . $this->append . '" title=\'Next Page\'>' . $tag . '</a>';
            } else {
                return $tag;
            }
    }
 
    /**
     * affiche le lien "précedent"
     *
     * @access public
     * @param string $tag Text string to be displayed as the link. Defaults to '<<'
     * @return string
     */
    function renderPrev($tag = '&lt;&lt;') {
        if ($this->total_rows == 0)
            return FALSE;
 
            if ($this->page > 1) {
                //return ' <a href="' . $this->php_self . '?page=' . ($this->page - 1) . '&' . $this->append . '">' . $tag . '</a>';
                $pageno = $this->page - 1;
                //return " <a href='javascript:void(0);' OnClick='getdata( $pageno )' title='Previous Page'>$tag</a> ";
                return ' <a href="' . $this->php_self . '?page=' . ($this->page - 1) . '&' . $this->append . '">' . $tag . '</a>';
            } else {
                return " $tag ";
            }
    }
 
    /**
     * Affiche les n° de pages
     *
     * @access public
     * @return string
     */
    function renderNav($prefix = '<span class="page_link">', $suffix = '</span>') {
        if ($this->total_rows == 0)
            return FALSE;
 
            $batch = ceil($this->page / $this->links_per_page );
            $end = $batch * $this->links_per_page;
            if ($end == $this->page) {
                //$end = $end + $this->links_per_page - 1;
                //$end = $end + ceil($this->links_per_page/2);
            }
            if ($end > $this->max_pages) {
                $end = $this->max_pages;
            }
            $start = $end - $this->links_per_page + 1;
            $links = '';
 
            for($i = $start; $i <= $end; $i ++) {
                if ($i == $this->page) {
                    $links .= $prefix . " $i " . $suffix;
                } else {
                    //$pageno = $this->page + 1;
                    //$links .= " <a href='javascript:void(0);' OnClick='getdata( $i )' title='page $i'>$i</a> ";
                    $links .= ' ' . $prefix . '<a href="' . $this->php_self . '?page=' . $i . '&' . $this->append . '">' . $i . '</a>' . $suffix . ' ';
                }
            }
 
            return $links;
    }
 
    /**
     * Affiche les liens de la navigation
     *
     * @access public
     * @return string
     */
    function renderFullNav() {
        //echo $this->renderFirst() . " " . $this->renderPrev();
 
        return $this->renderFirst() . '&nbsp;' . $this->renderPrev() . '&nbsp;' . $this->renderNav() . '&nbsp;' . $this->renderNext() . '&nbsp;' . $this->renderLast();
    }
 
    /**
     * Set debug
     *
     * @access public
     * @param bool $debug Set to TRUE to enable debug messages
     * @return void
     */
    function setDebug($debug) {
        $this->debug = $debug;
    }
}
?>

@bonjourajax

Hello,

Voila le css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
@charset "ISO-8859-1";
 
		body {
			font-size: 15px;
			color: #343d44;
			font-family: "segoe-ui", "open-sans", courier-new, arial;
			padding: 0;
			margin: 0;
		}
		table {
			margin: auto;
			font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
			font-size: 12px;
		}
 
		h1 {
			margin: 25px auto 0;
			text-align: center;
			text-transform: uppercase;
			font-size: 17px;
		}
 
		table td {
			transition: all .5s;
		}
 
		/* Table */
		.data-table {
			border-collapse: collapse;
			font-size: 14px;
			min-width: 537px;
		}
 
		.data-table th, 
		.data-table td {
			border: 1px solid #e1edff;
			padding: 7px 17px;
		}
		.data-table caption {
			margin: 7px;
		}
 
		/* Table Header */
		.data-table thead th {
			background-color: #508abb;
			color: #FFFFFF;
			border-color: #6ea1cc !important;
			text-transform: uppercase;
		}
 
		/* Table Body */
		.data-table tbody td {
			color: #353535;
		}
		.data-table tbody td:first-child,
		.data-table tbody td:nth-child(4),
		.data-table tbody td:last-child {
			text-align: center;
		}
 
		.data-table tbody tr:nth-child(odd) td {
			background-color: #f4fbff;
		}
		.data-table tbody tr:hover td {
			background-color: #ffffa2;
			border-color: #ffff0f;
		}
 
		/* Table Footer */
		.data-table tfoot th {
			background-color: #e5f5ff;
			text-align: right;
		}
		.data-table tfoot th:first-child {
			text-align: left;
		}
		.data-table tbody td:empty
		{
			background-color: #ffcccc;
		}
		.fieldset-auto-width 
		{
         	display: inline-block;
    	}
 
	   input#filterbutton{
            cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/ 
            padding:5px 25px; /*add some padding to the inside of the button*/ 
            /* background:#35b128; the colour of the button*/
            background:#508abb; 
            border:1px solid #33842a; /*required or the default border for the browser will appear*/ 
            /*give the button curved corners, alter the size as required*/ 
            -moz-border-radius: 10px; 
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /*give the button a drop shadow*/ 
            -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
            -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
            box-shadow: 0 0 4px rgba(0,0,0, .75);
            /*style the text*/ 
               color:#f3f3f3;
            font-size:1.1em;
        }
        input#filterbutton:hover, input#gobutton:focus{
            background-color :#399630; /*make the background a little darker*/
            /*reduce the drop shadow size to give a pushed button effect*/ 
            -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
            -moz-box-shadow: 0 0 1px rgba(0,0,0, .75); 
            box-shadow: 0 0 1px rgba(0,0,0, .75);
        }
.page-nav{
    margin: 10px 0 0 0;
    padding: 8px;
}
 
.page-nav a{
    border: none;
    padding: 8px;
    text-decoration: none;
    background-color: #FFC;
    border: thin solid #6ea1cc;
    color: #000;
}
 
.page-nav a:hover{
    border: thin solid #508abb;
    background-color: #f4fbff;
    color: #000;
}
 
/*this is the style for selected page number*/
.page_link{
    padding: 6px;
}

tu pourrais m'en dire un peu plus sur les soluces que tu proposes stp?

solution 1, remplacer les id par des class (je sais pas pourquoi, chez moi ça fonctionne )

solution 2, remettre le css via js apres chaque chargement de page

merci

14/05/2018, 16h40
bonjourajax
Pour la solution 1, lorsque je charge dynamiquement (admettons une div) mon css ne s'applique pas aux elements chargés ayant un id mais seulement ceux ayant une class

Pour la solution 2,
Code:

1 2 3 4 $('#retrieved-data').load('url', function() { $('#table').css('display', 'block') });