Probleem met aantal items per pagina (all)

Door Kees Mulder op 06-01-2015 15:48 gewijzigd op 06-01-2015 16:08

2.046 views

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:


        <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


 <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:


<?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?

Pipo Clown

06-01-2015 15:54 gewijzigd op 06-01-2015 15:55

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.

Kees Mulder

06-01-2015 16:09

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

06-01-2015 18:16 gewijzigd op 07-01-2015 09:44

Gebruik geen .live dat is al vanaf jQuery 1.7 deprecated.

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

[code lang="js"]
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);
});

[/code]

Kees Mulder

06-01-2015 19:10 gewijzigd op 06-01-2015 19:15

Ik heb de wijzigingen doorgevoerd maar dan blijft hij op loading hangen!

[code js]
$(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]

Ger van Steenderen

06-01-2015 19:30

Heb je misschien een verouderde jQuery?
Krijg foutmeldingen in de dev tool van je browser?

Kees Mulder

06-01-2015 23:24

Ik heb nu het volgende maar hij laad niets meer als ik het aantal verander


		<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

07-01-2015 09:41

Mijn fout, op regel 33 moet load_data(1) veranderd worden in loadData(1)

Reageren

Inloggen om te reageren