Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am trying to do pagination using javascript but all in vain, please help..

<script language="Javascript">
function nextclicked()
{ 
document.getElementById("clickednext").value = document.getElementById("clickednext").value + 1;
document.forms["newsmanager"].submit();
}
</script>

<form name = "newsmanager" method="post" action="NewsManager.php">
<input type = "hidden"  id="clickednext" name="clickednext" > 


if(isset($_POST['clickednext']) && $_POST['clickednext']>=1)
{    
$_POST['clickednext'] = $_POST['clickednext'] +9; 
$NewsQuery = "SELECT NewsDetails FROM News LIMIT " .$_POST['clickednext']. ",10";
    }
    else
    {
    $NewsQuery  = "SELECT NewsDetails FROM News LIMIT 0,10";
    }

    $result = mysqli_query($dbc,$NewsQuery);
}

UPDATE :

     <div class=d2 align=left>
<a  href="#" onclick=" nextclicked(); submit();" >
Next
</a>

UPDATE ENDS......

The first time when i click the Next hyperlink label, then it works, that is, 10 is assigned $_POST['clickednext'] and the next 10 values appear from the database, but the second time i click the label , then it doesn't?

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

Here's a little algorithm I wrote using php to create pagination:

$x=$numStories;
$y=$x%5;
$z=($x-$y)/5;
if($y!=0){
    $numPages=$z+1;
}
else{
    $numPages=$z;
}

Where 5 is the number of stories per page, and $numStories is the total amount of stories (or in your case, news articles) you wish to use.

Then, just display the amount of pages ($numPages) in any way you'd like, and your good to go.

[EDIT]

I created an archive.php page, that took a page number as a GET parameter (archive.php?page=3). From there, I selected the first five entries in my database after $pageNum (in this case 3) * 10 (or however many posts per page you are wanting to display.

The best thing to do is make as much of your code dynamic and flexible, so that it is self sustaining.

[EDIT 2]

<script>
function nextclicked()
{ 
    document.forms["newsmanager"].submit();
}
</script>

<?php
    $currentPage = $_POST['page'];

    $numStories = //get the total amount of entries
    $x=$numStories;
    $y=$x%10;
    $z=($x-$y)/10;
    if($y!=0){
        $numPages=$z+1;
    }
    else{
        $numPages=$z;
    }

    if(isset($currentPage) && $currentPage>=1)
    {    
    $currentPage = $currentPage +9; 
    $NewsQuery = "SELECT NewsDetails FROM News LIMIT " .$currentPage. ",10";
        }
        else
        {
        $NewsQuery  = "SELECT NewsDetails FROM News LIMIT 0,10";
        }

        $result = mysqli_query($dbc,$NewsQuery);
    }

?>

<form>
    <input type='hidden' name='page' text='' value='<?php echo "$currentPage"' />
</form>
<a href="#" onclick="nextClicked()">Next--></a>
share|improve this answer
 
please check the updated part –  sqlchild Jul 20 '11 at 15:32
1  
see my edit, and if there is anything else you need explained, please be a little more specific –  Jordan Foreman Jul 20 '11 at 16:33
1  
Since you're submitting a form, add a hidden field with the value of the page you want to use, and use it as a POST parameter instead of a GET parameter. (it might not even have to be hidden, if you just want to display a textbox with the page number in it, and then allow the user to jump to a page that way) –  Jordan Foreman Jul 20 '11 at 16:38
1  
its working the first time, because $_POST['clickednext'] isn't changing. You need to make whatever that value is change whenever the page changes –  Jordan Foreman Jul 20 '11 at 16:41
1  
sorry. Delete the line in the script that references 'next' and you should be good. Also, I forgot to edit your PHP to use the $currentPage variable. That is fixed –  Jordan Foreman Jul 20 '11 at 18:09
show 18 more comments

Your code is completely wrong. You should scrap it and start all over again. I will show you how to do so.

I have a rule when it comes to Ajax, and it goes like this. If you cannot do the functionality without Ajax, there's no way you should attempt to do it with Ajax.

If you know anything about javascript, you'll know that XmlHttpRequest makes working with Ajax hellish. Hence why we have javascript frameworks such as JQuery and Mootools. You might also like a php ajax framework called PHPLiveX. I only use JQuery, so here's how to do the solution in JQuery.

Step 1: Strip your ajax and create the solution in php

This pagination tutorial in php will help.

Step 2a: Create the ajax with PHPLiveX PHPLiveX is really cool and underated, as it allows you to use php functions without reloading the whole page, in a more convienient way, than if you'd used javascript.

PHPLiveX will help you the best. It's pretty straightforward. You call a php function to do something, return some values, and choose the target: of where you want the values to go.

I personally would use PHPLiveX for this job, as it's better suited. JQuery is more for postdata.

Step 2b: Create the ajax in JQuery

I'm going to assume that you know how to select elements by id with JQuery and append or replaceWith them. If not you can look the function up.

Below is the code required to submit a POST or GET with JQuery. Adapt this to your code. You'll have to modify the code below to add appending and stuff.

$(".tornfieldcard").click(function() {

    var dataString = $("#addfieldForm").serialize();
        //lets get the form data and use that
    var newValue = $("#newValue").val();
    var itemid4 = $(this).attr("itemid4");
    var dataString = "itemid=" + itemid + "&newValue=" + newValue;
        //or get the attr/valu from elements

    $("#loading5").show();
    $("#loading5").fadeIn(400).html('<img src="icons/loading.gif">');

    $.ajax({
    type: "POST",
    url: "ajaxcontrols.php",
    data: dataString,
    cache: false,
    success: function(html){

    $("#loading5").remove();
    $(".fieldcardNEW").fadeOut('slow');
    $('.fieldcardNEW').remove();

    $("#conveyorbelt_"+itemid4+"").append("<div class=\"fieldcard\"><b>"+attribute+"</b>  <br><div itemid=\""+itemid4+"\" attribute=\""+attribute+"\">"+value+"</div></div>");
    }
});
share|improve this answer
 
please check the updated part, what's the error in my code. –  sqlchild Jul 20 '11 at 15:32
 
What's wrong with your code is that your HTML is invalid. It's not attribute=value, it's attribute="value". You're going to cause serious problems with Javascript and developer tools. impressivewebs.com/dom-improperly-nested –  desbest Jul 20 '11 at 15:56
 
sir, can you please specify the line with the error, please –  sqlchild Jul 20 '11 at 16:18
 
Your UPDATE has all the errors. –  desbest Jul 20 '11 at 16:52
add comment

PHP is server-side language. you have to put your php code to

<?php

=====

<script language="Javascript">
function nextclicked()
{ 
document.getElementById("next").value = document.getElementById("next").value + 1;
document.forms["newsmanager"].submit();
}
</script>

<form name = "newsmanager" method="post" action="NewsManager.php">
<input type = "hidden"  id="clickednext" name="clickednext" > 

<?php
if(isset($_POST['clickednext']) && $_POST['clickednext']>=1)
{    
$_POST['clickednext'] = $_POST['clickednext'] +9; 
$NewsQuery = "SELECT NewsDetails FROM News LIMIT " .intval($_POST['clickednext']). ",10";
    }
    else
    {
    $NewsQuery  = "SELECT NewsDetails FROM News LIMIT 0,10";
    }

    $result = mysqli_query($dbc,$NewsQuery);
}
?>

additionally, user can't click to hidden form field. you need, for example button and have onclick event ready

<button name="next" value="1" onclick="nextclicked();">Next</button>
share|improve this answer
 
PLEASE watch out the updated part of my post –  sqlchild Jul 20 '11 at 15:08
 
sir, what have you changed..i mean you have just added inval and nothing else..........will it work? what was wrong in my code? –  sqlchild Jul 20 '11 at 15:10
 
sir, please check out the update part –  sqlchild Jul 20 '11 at 15:32
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.