Probleem met aantal items per pagina (all)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Front-End Developer – Junior/Medior/Senior

Onze opdrachtgever Onze opdrachtgever maakt kassa’s, personeelsplanning bar-/keukenmanagement, tafelreserveringssoftware, websites en webshops. Van horeca tot retail, van leisure tot zorg: elke ondernemer mag bij hun aankloppen. 24/7 spelen ze proactief in op de markt. Met softwareontwikkeling, projectmanagement, systeemimplementatie, helpdesk en technische dienst in eigen beheer bieden ze zo zekerheid voor haar klanten. Standplaats Hengelo Waar we jou voor nodig hebben? Van sterrenrestaurant tot vakantiepark: de klanten van onze opdrachtgever zijn heel divers. Een intuïtieve orderwebsite voor een grote cateraar of een sieradenplatform voor een juwelier, je draait er je hand niet voor om. Je communiceert helder en staat klanten graag

Bekijk vacature »

Kees Mulder

Kees Mulder

06/01/2015 15:48:17
Quote Anchor link
Heb een script van ajax/php/sql waarbij je een aantal items per pagina ziet. Nu wil ik een extra optie dat je ook nog kan kiezen hoeveel items per pagina.

Dit is het stukje javascript:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
        <script type="text/javascript">
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='./img/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
                function loadData(page){
                    loading_show();                    
                    $.ajax
                    ({
                        type: "POST",
                        url: "load_data.php",
                        data: "page="+page,
                        success: function(msg)
                        {
                            $("#container").ajaxComplete(function(event, request, settings)
                            {
                                loading_hide();
                                $("#container").html(msg);
                                //Put code here like so
                                $('html, body').animate({ scrollTop: 0 }, 1000);                                
                            });
                        }
                    });
                }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').live('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                    
                });
                $("#aantal").live('change',function(){
                    var aantal = $('#aantal :selected').val();
                    alert('Aantal per pagina:'+aantal);
                    // alert('hello');
                });
                $('#go_btn').live('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);  
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                });                
            });
        </script>            


en als selectbox

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<select name='aantal' class='aantal' id='aantal'>
          <option value='10'>10</option>
          <option value='60' selected='selected'>60</option>
          <option value='1000'>all</option>
        </select>


En dit als select van de items:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
if($_POST['page'])
{

$page = $_POST['page'];
$cur_page = $page;
$page -= 1;
$per_page = ($_POST["aantal"] <> "" && is_numeric($_GET["aantal"]) ) ? intval($_GET["aantal"]) : 60;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $per_page;
include"db.php";
?>


Ik kan kiezen 10, 60 of 1000(all) items. Als ik dat doe dan geeft hij wel de alert box met het aantal wat ik heb gekozen. Alleen nu weet ik niet verder hoe ik de pagina opnieuw ga laden en het juiste aantal laat zien. Kan iemand me helpen?
Gewijzigd op 06/01/2015 16:08:45 door Kees Mulder
 
PHP hulp

PHP hulp

20/05/2019 13:53:23
Honeypot
 
Pipo Clown

Pipo Clown

06/01/2015 15:54:42
Quote Anchor link
Heel veel succes met deze oefening.

Wanneer je tegen problemen op loopt, geef dan gerust aan wat er mis gaat. Misschien kunnen wij dan helpen.
Gewijzigd op 06/01/2015 15:55:06 door Pipo Clown
 
Kees Mulder

Kees Mulder

06/01/2015 16:09:12
Quote Anchor link
Had het probleem in tussen de code staan. Sorry.

Ik kan kiezen 10, 60 of 1000(all) items. Als ik dat doe dan geeft hij wel de alert box met het aantal wat ik heb gekozen. Alleen nu weet ik niet verder hoe ik de pagina opnieuw ga laden en het juiste aantal laat zien. Kan iemand me helpen?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

06/01/2015 18:16:54
Quote Anchor link
Gebruik geen .live dat is al vanaf jQuery 1.7 deprecated.

Wat doet ajaxComplete binnen een ajax call, die is daar geheel overbodig.

Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
            function loadData(page) {
                loading_show();
                $.ajax({
                    url: 'load_data.php',
                    type: 'post',
                    dataType: 'html',
                    data: {"page": page, per_page: $("#aantal").val()}
                })
// let op methodchaining, geen ; gebruiken
                .done(function(msg){
                    loading_hide();
                    $("#container").html(msg);
                })
// let op methodchaining, geen ; gebruiken
                .fail(function(){
                    alert('Sorry gegevens kunnen niet worden geladen');
                });
            }

                
            
                
            $("#aantal").on("change", function(){
                loadData(1);
            });

            
Gewijzigd op 07/01/2015 09:44:50 door Ger van Steenderen
 
Kees Mulder

Kees Mulder

06/01/2015 19:10:51
Quote Anchor link
Ik heb de wijzigingen doorgevoerd maar dan blijft hij op loading hangen!

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='./img/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }  
                
                
                
                
                            function loadData(page) {
                loading_show();
                $.ajax({
                    url: 'load_data.php',
                    type: 'post',
                    dataType: 'html',
                    data: {"page": page, "aantal": ($("#aantal").val())}
                }) // let op methodchaining, geen ; gebruiken
                .done(function(msg){
                    loading_hide();
                    $("#container").html(msg);
                }) // let op methodchaining, geen ; gebruiken
                .fail(function(){
                    alert('Sorry gegevens kunnen niet worden geladen');
                });
            }
                loadData(1);  // For first time page load default results
                $('#container .pagination li.active').on('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                    
                });
                $("#aantal").on('change',function(){
                    var aantal = $('#aantal :selected').val();
                   loadData(aantal);
                    // alert('hello');
                });
                $('#go_btn').on('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);  
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                });                
            });
[/code js]
Gewijzigd op 06/01/2015 19:15:37 door Kees Mulder
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

06/01/2015 19:30:47
Quote Anchor link
Heb je misschien een verouderde jQuery?
Krijg foutmeldingen in de dev tool van je browser?
 
Kees Mulder

Kees Mulder

06/01/2015 23:24:32
Quote Anchor link
Ik heb nu het volgende maar hij laad niets meer als ik het aantal verander

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function loading_show(){
                    $('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
                }
                function loading_hide(){
                    $('#loading').fadeOut('fast');
                }                
 function loadData(page) {
                loading_show();
                $.ajax({
                    url: 'load_data.php',
                    type: 'post',
                    dataType: 'html',
                    data: {"page": page, per_page: ($("#aantal").val())}
                }) // let op methodchaining, geen ; gebruiken
                .done(function(msg){
                    loading_hide();
                    $("#container").html(msg);
                }) // let op methodchaining, geen ; gebruiken
                .fail(function(){
                    alert('Sorry gegevens kunnen niet worden geladen');
                });
            }
                 loadData(1);  // For first time page load default results
                $('#container .pagination li.active').on('click',function(){
                    var page = $(this).attr('p');
                    loadData(page);
                    
                });
            $("#aantal").on("change", function(){
                load_data(1);
            });
                $('#go_btn').on('click',function(){
                    var page = parseInt($('.goto').val());
                    var no_of_pages = parseInt($('.total').attr('a'));
                    if(page != 0 && page <= no_of_pages){
                        loadData(page);  
                    }else{
                        alert('Enter a PAGE between 1 and '+no_of_pages);
                        $('.goto').val("").focus();
                        return false;
                    }
                });                
            });
        </script>
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

07/01/2015 09:41:16
Quote Anchor link
Mijn fout, op regel 33 moet load_data(1) veranderd worden in loadData(1)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.