Colonne par ligne en ayant une pagination BDD

**dancom5** · 26/06/2013, 07h40

Bonjour.

J'ai fais un code qui me permet d'afficher avec une pagination en ajax qui fonctionne très bien (index.php et fetch_pages.php). Aucun problème de ce côté.

J'ai tenté d'ajouter de faire un bout de code pour faire 5 par ligne mais, ça donne pas le résultat souhaité avec le reste de mon code.

Le 5 par ligne, si je le fait tout seul pour afficher un nombre de colonnes, ça fonctionne. Mais pas quand je veux l'intégrer au reste de fetch_pages.php.

J'ai probablement pas bien positionner ce bout de code à la bonne place.

A l'affichage, quand j'indique une pagination de 5 par page, avec 5 par ligne, ça m'affiche seulement 1 ligne. Si je mets 25 par page, avec 5 par ligne, ça m'affiche seulement 5 mais en sautant à coup de 5.

Pour aider à repérer là où ça ne va pas, j'ai commenté les lignes à propos des colonnes par ligne. (lignes concernées: 26,35,41 et 45)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php session_start();
 
include("config.inc.php");
 
$p_n = isset($_POST['page']) ? $_POST['page'] : '' ;
$v_s = isset($_POST['s']) ? "%". $_POST['s'] ."%" : '' ;
 
$page_number = filter_var($p_n, FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
$valid_search = filter_var($v_s, FILTER_SANITIZE_SPECIAL_CHARS, FILTER_FLAG_STRIP_HIGH);
 
if(!is_numeric($page_number)){die('Invalid page number!');}
 
$position = ($page_number * $item_per_page);
 
$results = $dbh->prepare(' SELECT id,name,message FROM paginate WHERE name LIKE :searchname OR message LIKE :searchmsgs ORDER BY id DESC LIMIT :position, :item_per_page ');
$results->bindParam(':searchname', $valid_search, PDO::PARAM_STR, 25);
$results->bindParam(':searchmsgs', $valid_search, PDO::PARAM_STR, 25);
$results->bindParam(':position', $position, PDO::PARAM_INT, 4);
$results->bindParam(':item_per_page', $item_per_page, PDO::PARAM_INT, 4);
$results->execute();
 
$strreplaceregexp = str_replace("%","",$valid_search);
 
echo '<ul class="page_result">';
 
$i = 0;// initialiser pour un nombre de colonne
 
$alternebg_i = 0;
 
while ($row = $results->fetch())
{
 
  $alternebg = ($alternebg_i++ & 1) ? '#111' : '#112';
 
  $i++;//On l'incrémente, ça nous aide à savoir combien d'éléments ont été affichés.
 
  $regexp = '/('.$strreplaceregexp.')/i';
  $remplacepar = '<span class="surbriancesearch">$1</span>';
  $row['message'] =  preg_replace($regexp, $remplacepar, $row['message']);
 
  if ( $i % 5 === 0 ) {//Si $i est un multiple de 5
 
    echo '<div style="background-color:'. $alternebg .';border-radius:12px"><li id="item_'.$row["id"].'"><span class="queryid">'.$row["id"].'</span><span class="page_name">'.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li></div>';    
 
  }//fin multiple de 5
 
}
echo '</ul>';
 
if( $page_number+1 != $_SESSION['total_pages'] ) 
{
  echo '<div style="margin-bottom:20px;color:black"><div style="float:left;margin-top:3px;margin-left:33px"><span style="background-color:white">&nbsp;Page :<strong>';
  echo $page_number+1;
  echo ' / ';
  echo $_SESSION['total_pages'].'</strong>&nbsp;</span></div>';
  echo '<a class="reload" href="#top">TOP</a><br>';
}
else
{
  echo '<div style="margin-bottom:20px;color:black"><div style="float:left;margin-top:3px;margin-left:33px"><span style="background-color:white">&nbsp;Page :<strong>';
  echo $page_number+1;
  echo ' / ';
  echo $_SESSION['total_pages'].'</strong>&nbsp;</span></div>';
  echo '<a class="reload" href="#top">TOP</a><br>';
}
 
?>

Si quelqu'un peut m'éclairer sur cela, ça serait bien apprécié. Merci.

**dancom5** · 26/06/2013, 10h13

J'ai fait comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
echo '<ul class="page_result">';
 
$i = 1;// initialiser pour un nombre de colonne
 
$alternebg_i = 0;
 
echo '<table border=1><tr>';
 
 
while ($row = $results->fetch())
{
  echo '<td>';
  $alternebg = ($alternebg_i++ & 1) ? '#111' : '#444';
 
  $regexp = '/('.$strreplaceregexp.')/i';
  $remplacepar = '<span class="surbriancesearch">$1</span>';
  $row['message'] =  preg_replace($regexp, $remplacepar, $row['message']);
 
    echo '<div style="background-color:'. $alternebg .';border-radius:12px"><li id="item_'.$row["id"].'"><span class="queryid">'.$row["id"].'</span><span class="page_name"></span><span class="page_message"></span></li></div>';    
 
echo '</td>';
 
if ($i%5 == 0)
{
echo '</tr><tr>';
 
  }//fin multiple de 5
 
$i++;
}
echo '</ul>';

Mais, je veux ne pas mettre de balise html table. Juste utilise la balise li que j'ai déjà. Une aide.

Autrement, avec la balise table, ça marche globalement.

**mandrake_of_mandregas** · 26/06/2013, 14h41

C'est normal ce qui se passe avec ton code, car tu lui demande d'afficher uniquement quand $i est un multiple de 5.

tu devrais collecter l'affichage dans une variable que tu réinitialise ç chaque fois que $i devient multiple de 5

**dancom5** · 26/06/2013, 22h03

J'ai réussi à le faire mais je suis obligé d'utiliser la balise TABLE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
echo '<ul class="page_result">';
 
$i = 1;// initialiser pour un nombre de colonne
 
$alternebg_i = 0;
 
echo '<table border="0" width="100%"><tr>';
 
 
while ($row = $results->fetch())
{
  echo '<td width="20%">';
  $alternebg = ($alternebg_i++ & 1) ? '#100' : '#105';
 
  $regexp = '/('.$strreplaceregexp.')/i';
  $remplacepar = '<span class="surbriancesearch">$1</span>';
  $row['message'] =  preg_replace($regexp, $remplacepar, $row['message']);
 
    echo '<div style="background-color:'. $alternebg .';border-radius:12px"><li id="item_'.$row["id"].'"><span class="queryid">'.$row["id"].'</span><span class="page_name"></span><span class="page_message"></span></li></div>';    
 
echo '</td>';
 
if ($i%5 == 0)
{
echo '</tr><tr>';
 
  }//fin multiple de 5
 
$i++;
}
echo '</ul>';

Les deux couleurs de fond alternées quand je mets 25 par page, c'est en damier. J'aimerais bien que ce soit en rangée les couleurs.

Merci pour l'info.

**dancom5** · 28/06/2013, 08h44

Tien mon bout de code finalisé et qui fonctionne sauf pour une chose:

Il faut que je remplisse les espaces vide.

De l'aide me serait bien utile.

Si je mets 3 colonnes, mais que j'ai 4 données, il faut que les 2
autres soient remplis avec quelque chose. Je sais pas le faire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$colonne_i = 1;
 
$alternebg_i = 0;
 
echo '<table border="1" width="100%"><tr>';
 
while ($row = $results->fetch())
{
  echo '<td>';
 
  $alternebg = ($alternebg_i++ & 1) ? '#100' : '#155';
 
  $regexp = '/('.$strreplaceregexp.')/i';
  $remplacepar = '<span class="surbriancesearch">$1</span>';
  $row['message'] =  preg_replace($regexp, $remplacepar, $row['message']);
 
  echo '<div style="background-color:'. $alternebg .';border-radius:12px"><li id="item_'.$row["id"].'"><span class="queryid">'.$row["id"].'</span><span class="page_name">'. $row['name'] .'</span><span class="page_message">'. $row['message'] .'</span></li></div>';    
 
    echo '</td>';
 
    if ($colonne_i%3 == 0)
    {
    echo '</tr><tr>';
    }
 
    $colonne_i++;
 
}
echo '</ul>';

**Celira** · 28/06/2013, 11h34

Tu peux tester ton compteur après la boucle.
Si tu n'as pas un multiple de trois, tu ajoutes autant de cases qu'il faut pour finir la ligne (et tu n'oublies pas de fermer la ligne)

**dancom5** · 28/06/2013, 20h28

En ajoutant après la ligne 28 ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
if ($colonne_i != 3 ) 
{
    for ($j=1; $j<=$colonne_i; $j++) 
    {
        echo "<td>test</td>";
    }
    echo "</tr>";
}

ça ajoute trop de colonnes et quand j'ai deux plein, ça n'ajoute pas la colonne qui manque.

**dancom5** · 29/06/2013, 06h33

J'ai fini par trouver la solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$nb = 5;
$i = 0;
echo'<table id="tab_s">';
 
$alternebg_i = 0;
 
while ($row = $results->fetch())
{
    if ($i === $nb) 
    {
        echo '</tr>';
        $i = 0;
    }
    if ($i === 0) 
    {
        echo '<tr id="row-s">';
    }
 
  $alternebg = ($alternebg_i++ & 1) ? 'rgb(1,1,1)' : 'rgb(1,1,1)';
 
  $regexp = '/('.$strreplaceregexp.')/i';
  $remplacepar = '<span class="surbriancesearch">$1</span>';
  $row['message'] =  preg_replace($regexp, $remplacepar, $row['message']);
 
  echo '<td id="col_s"><div style="background-color:'. $alternebg .';border-radius:12px"><li id="item_'.$row["id"].'"><span class="queryid">'.$row["id"].'</span><span class="page_name">'. $row['name'] .'</span><br><div class="page_message"> IMG SRC </div></li></div></td>';    
 
  $i++;
}
if ($i < $nb) 
{
  while($i++ < $nb) 
  {
    echo '<td id="col_v">« E M P T Y »</td>';
  }
  echo '</tr>';
}
echo'</table>';

Une image pour illustrer le résultat

Il me reste qu'une seule chose mais que je n'ai jamais vu encore sur le Web dans mes recherches.

Si j'ai 25 par page, je dois afficher 25 cases mais que j'ai 6 images avec un maximum de 5 colonnes par ligne.

Comment, je devrais ajuster mon code pour afficher les cases vides pour
faire 25 cases au total par page incluant les vides et les occupées?

J'aurais besoin d'un exemple. Merci.

**rawsrc** · 29/06/2013, 11h55

Salut,

j'avais commencé hier à reprendre ton code et t'as bossé durant la nuit.
Voici comment j'aurais fait. Approche totalement différente de la tienne pour un résultat identique (enfin j'ai pas testé, alors croisage des orteils)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
 
session_start();
 
include 'config.inc.php';
 
$page = isset($_POST['page']) ? intval($_POST['page']) : '';
$seek = isset($_POST['s'])    ? $_POST['s']            : '';
 
if (empty($page))
{
    exit ('Invalid page number !');
}
 
$sql = <<<SQL
  SELECT id, name, message
    FROM paginate
   WHERE    name    LIKE CONCAT("%", :name, "%")
         OR message LIKE CONCAT("%", :msg,  "%")
ORDER BY id DESC
   LIMIT :offset, :length
SQL;
 
$offset = ($page - 1) * $item_per_page;
$stmt   = $dbh->prepare($sql);
$stmt->bindParam(':name', $seek, PDO::PARAM_STR, 25);
$stmt->bindParam(':msg',  $seek, PDO::PARAM_STR, 25);
$stmt->bindParam(':offset', (int)$offset, PDO::PARAM_INT, 4);
$stmt->bindParam(':length', (int)$item_per_page, PDO::PARAM_INT, 4);
$stmt->execute();
 
// paramétrage de l'affichage
$grid_cols = 5;     // nombre total de colonnes à afficher
$grid_rows = 5;     // nombre total de lignes à afficher
 
// fonction d'échappement des données à l'affichage
$hsc       = function($p) { return htmlspecialchars($p, ENT_QUOTES); };
$html      = array();
$bg_color  = '#155';
$data      = $stmt->fetchAll(PDO::FETCH_ASSOC);
$nb_data   = count($data);
$i         = -1;
 
for ($row = 0 ; $row < $grid_rows ; ++$row)
{
    $html[] = '<tr>';
 
    for ($col = 0 ; $col < $grid_cols ; ++$col)
    {
        $bg_color = ($bg_color === '#155') ? '#100' : '#155';
 
        if (++$i < $nb_data)
        {
            $message = str_replace($seek, '<span class="surbriancesearch">'.$hsc($seek).'</span>', $data[$i]['message']);
            $html[]  =
<<<HTML
<td>
    <div style="background-color:{$bg_color};border-radius:12px">
        <li id="item_{$data[$i]['id']}">
            <span class="queryid">{$data[$i]['id']}</span>
            <span class="page_name">{$hsc($data[$i]['name'])}</span>
            <span class="page_message">{$message}</span>
        </li>
    </div>
</td>
HTML;
        }
        else
        {
            $html[] = '<td>E M P T Y</td>';
        }
    }
 
    $html[] = '</tr>';
}
?>
<table>
    <tbody>
        <?php echo implode("\n", $html) ?>
    </tbody>
</table>

Je pense que tu t'étais trompé dans le calcul de l'offset de la clause LIMIT.
Quand tu demandes la page 1 -> l'offset de départ est 0 ((1 - 1) * $items_per_page) soit LIMIT 0, 25.
Quand tu demandes la page 2 -> l'offset de départ est 25 ((2 - 1) * $items_per_page) soit LIMIT 25, 25.
Quand tu demandes la page 3 -> l'offset de départ est 50 ((3 - 1) * $items_per_page) soit LIMIT 50, 25 et ainsi de suite...
d'où : $offset = ($page - 1) * $item_per_page;

**dancom5** · 29/06/2013, 12h27

Merci rawsrc, cette page est artiste.fetch.php qui est appelée par un autre
fichier via ajax et la voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php session_start();
 
include("config.inc.php");
 
$searchpost = isset($_POST['search']) ? $_POST['search'] : NULL;
$artistepost = isset($_POST['artiste']) ? $_POST['artiste'] : NULL;
 
if(!$artistepost)
    {
        $search = filter_var($searchpost, FILTER_SANITIZE_SPECIAL_CHARS, FILTER_FLAG_STRIP_HIGH);
    }
    else
    {
        $search = filter_var($artistepost, FILTER_SANITIZE_SPECIAL_CHARS, FILTER_FLAG_STRIP_HIGH);
    }
 
$results = $dbh->prepare(' SELECT * FROM paginate WHERE name LIKE :searchn OR message LIKE :searchm ');
$results->execute(array(":searchn" => "%" . $search . "%",":searchm" => "%" . $search . "%"));
$get_total_rows = $results->rowCount();
 
//break total records into pages
$total_pages = ceil($get_total_rows/$item_per_page);
$_SESSION['total_pages'] = $total_pages;
 
$lebouton = ($item_per_page >= $get_total_rows) ? '' : '<button class="load_more" id="load_more_button">P L U S</button>';
 
if ($get_total_rows == 0)
{
  $aucunedonnee = '<div class="aucunedonnee">AUCUN ENREGISTREMENT!</div>';
}
else
{
  $aucunedonnee = '
            <div id="results"></div>

            <div align="center">
        '. $lebouton .'
                <div class="animation_image" style="display:none;"><img src="./js/ajax-loader.gif"> Loading...</div>
            </div>
    ';
}
 
?><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Pagination</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
 
<script type="text/javascript">
 
        $(document).ready(function()
        {
                var track_click = 0; //track user click on "load more" button, righ now it is 0 click
 
                var search = "<?php echo $search; ?>";
 
                var total_pages = <?php echo $total_pages; ?>;
 
                $('#results').load("artistes.fetch.php", { page:track_click, s:search }, function() {track_click++;}); //initial data to load
 
                $(".load_more").click(function (e)
                { //user clicks on button
 
                    $(this).hide(); //hide load more button on click
                    $('.animation_image').show(); //show loading image
 
                    if(track_click <= total_pages) //make sure user clicks are still less than total pages
                    {
                            //post page number and load returned data into result element
                            $.post('artistes.fetch.php',{'page': track_click, s: search }, function(data) {
 
                                    $(".load_more").show(); //bring back load more button
 
                                    $("#results").append(data); //append data received from server
 
                                    //scroll page to button element
                                    $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 1000);
 
                                    //hide loading image
                                    $('.animation_image').hide(); //hide loading image once data is received
 
                                    track_click++; //user click increment on load button
 
                            }).fail(function(xhr, ajaxOptions, thrownError) {
                                    alert(thrownError); //alert any HTTP error
                                    $(".load_more").show(); //bring back load more button
                                    $('.animation_image').hide(); //hide loading image once data is received
                            });
 
                            if(track_click >= total_pages-1)
                            {
                                    //reached end of the page yet? disable load button
                                    $(".load_more").remove(); // disparaitre le bouton PLUS
                                    $('.animation_image').remove(); // disparaitre l'image "loading..."
                            }
                     }
                });
        });
 
</script>
 
<script type="text/javascript">
    function reloadPage()
        {
        location.reload()
        }
</script>
 
<script type="text/javascript">
     setInterval(function()
    { $('button').fadeTo('fast',0.7).fadeTo('slow',1); }, 7000);
</script>
 
<link href="css/style.artistes.css" rel="stylesheet" type="text/css">
</head>
<body>
 
<div id="backgroundresults">
 
  <div id="conteneurresults">
      <div class="searchcontainer">
                    <form class="searching" method="POST">
                            <span style="color:yellow">Recherches »</span><input class="searchtext" type="text" name="search" value="<?php echo $search; ?>" />
                            <span style="color:white;family-font:Verdana;margin-right:1px;color:yellow"> Sélectionner »</span>
                            <select class="artisteselect" name="artiste">
                <option class="artisteoption" value="">&nbsp;&nbsp;ARTISTES&nbsp;&nbsp;</option>
                            <?php               
                                    $sql = 'SELECT name FROM paginate GROUP BY name ORDER BY name ';
                                    foreach ($dbh->query($sql) as $row) 
                                    {
                                        echo '<option class="artisteoption" value="'. $row['name'] .'">'. $row['name'] .'</option>';
                                    }
                            ?>    
                            </select>
 
                            <input class="searchsubmit" type="image" src="./css/search.png" />
                    </form>
            </div>
      <?php echo $aucunedonnee; ?>
  </div>
 
</div>
 
</body>
</html>

C'est que je dois passer par celle-ci pour qu'elle fonctionne mais votre
version m'indique "Invalid page number" surement que mon codage
doit être ajusté. Votre approche, je vais l'étudier pour la comprendre.
Je la trouve intéressante.

Je vais devoir regarder aussi pour le doctype qui apparait 2 fois dans
la source.

Colonne par ligne en ayant une pagination BDD [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager