De PHPhulp kroeg
Probleem met aantal items per pagina (all)
Dit is het stukje javascript:
Code (php)
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
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>
$(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)
1
2
3
4
5
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>
<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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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";
?>
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
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
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?
Wat doet ajaxComplete binnen een ajax call, die is daar geheel overbodig.
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);
});
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
Code (php)
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
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]
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
Krijg foutmeldingen in de dev tool van je browser?
Code (php)
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
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>
<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>