pagination using javascript in php and mysql

Question

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?

Answer 1

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>

Answer 2

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>");
    }
});

Answer 3

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>