Probleem met aantal items per pagina (all)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

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

29/03/2024 08:44:29
 
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.