Update the pagination information in PHP

I have designed a web page to display the CSV file contents in a paginated format. I have UI sliders which allows the users to control the display of CSV file contents. However, if I navigate to the second page, the slider gets reset and also I am able to display only the rows satisfying the slider values in the first page.This is the link to my work so far.

The PHP file which displays the CSV file in a paginated format is as below.

$names = file('demo.csv');
$page = $_GET['page'];

//constructor takes three parameters
//1. array to be paged
//2. number of results per page (optional parameter. Default is 10)
//3. the current page (optional parameter. Default  is 1)
$pagedResults = new Paginated($names, 20, $page);
$handle = fopen('demo.csv', 'r');
  if (($data = fgetcsv($handle, 1000, ',')) !== FALSE)

echo "<table id='kwTable' border='4' bgcolor='#adb214' style='float:center; margin:100'>";
echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
<tbody id="kwBody">
//when $row is false loop terminates
$header = true;
if (!$page) $page = 1;
while ( $row = $pagedResults->fetchPagedRow())
    if ($page == 1 && $header) 
        $header = false;
        continue;  // Skip this header row
    echo "<tr><td>";
    //echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
    $row1 = str_replace( ',', "</td><td>", $row );
    echo $row1;
    echo "</td></tr>";
echo "</table>";

//important to set the strategy to be used before a call to fetchPagedNavigation
$pagedResults->setLayout(new DoubleBarLayout());
echo $pagedResults->fetchPagedNavigation();
//$data1 = [];
$total_columns = 0;
$handle1 = fopen('demo.csv', 'r');
while (false !== ($row = fgetcsv($handle1, 1000, ','))) {
    0 === $total_columns and $total_columns = count($row);
    $i = 1;
    while (++$i <= $total_columns) {
         $data1[$i][] = (int) $row[$i - 1];

$i = 0;
while (++$i <= $total_columns) {
    $_SESSION["min-column-$i"] = min($data1[$i]);
    $_SESSION["max-column-$i"] = max($data1[$i]);

$_SESSION['totalcolumns'] = $total_columns;

Open in new window

This is the second page which gives me the sliders based on the total columns of my CSV file.

<?php include 'index.php'; ?>
      $totalcolumns = $_SESSION["totalcolumns"];

<!-- Include Simple Slider JavaScript and CSS -->
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" /> 

<!-- Activate Simple Slider on your input -->
  <h2>Keyword Scores</h2>

$i = 1;

while (++$i <= $_SESSION['totalcolumns']) {
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
        <br><?php echo "Keyword" ?>
        <?php echo $i -1 ?>
        <br><input type="text" data-slider="true" data-slider-range="<?php echo $range ?>" data-slider-step="1">
        <?php } ?>

var masterData=[];  

$(function() {

    $("button").on('click',function(){ loadXMLDoc(); });
       .each(function (index) {
           var range;
            var input = $(this);

            range = input.data("slider-range").split(",");

        .on("slider:ready slider:changed", function (event, data) {
            var $output =$(this).nextAll(".output:first");
            masterData[$output.attr("id").replace(/output/,"")] = data.value;
            $("#kwBody > tr").each(function() {
               var $cells = $(this).children("td");

               var found=false,count=0,currentCell;
               for (var i=0;i<masterData.length;i++) {
                 found = parseInt(currentCell.text(),10) >=masterData[i];
                 currentCell.toggleClass("found",found); //add or remove class to highlight 
               window.console && console.log(masterData,count);
               $(this).toggle(count==masterData.length); // show if all cells >


Open in new window

I am stuck in the above page to update the pagination of the dynamic display. Can someone please help me out as am really new to this scripting languages?
Who is Participating?
Eddie ShipmanConnect With a Mentor All-around developerCommented:
You can see example code for using ng-grid here: http://angular-ui.github.io/ng-grid/
You want to use the server Paging example code.
You'll modify this line:

Open in new window

to get the JSON from your PHP script.
Remember, you need to use PHP to convert your CSV to JSON which is fairly easy, here's a good example:
If you want your slider positions to remain from one page refresh to the next, you have a couple of options

1. Pass the current values as GET parameters and then insert the values when you instantiate the sliders on the next page.

2. Store the current values in a client-side store like a cookie, or window.name or use a library.

See http://stackoverflow.com/questions/10998412/how-can-i-use-jquery-to-read-a-cookie-and-store-it-in-a-variable/10998480#10998480

or this: http://www.sitepoint.com/cookieless-javascript-session-variables/
ramesh4046Author Commented:
Thanks for commenting out. I am pretty new to the scripting languages. I am not sure where to include the GET parameter? Should I include it in the javascript function or the PHP script?
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

ramesh4046Author Commented:
I have a scenario like below.

 - Initially, I am presented with a screen with all the CSV data, displayed in a paginated  format, as in the link, that I had provided in the question.

- Once I set the sliders, the values are getting reset (which is what I want) but the values are displayed in the first page only. Once, if I click on the second page, the slider gets reset and all the values are displayed again. I do not need this. I am quiet not sure on how to proceed in this case.

As per the links you had suggested, I am not sure where I have to include the GET parameter or the Window.name in my code. Kindly, let me know where I have to include the GET or Window.name in my code.
Another option, which I should have mentioned is to just get the new data by ajax and then you don't have to do page reloads.

Anyway, the easiest way is probably to pass get parameters. Find the part of your php code that tells it to go to the next page. When it creates those urls, just attach the current values of your sliders.

So, instead of sending .....slider.php?page=1  
you would send ........slider.php?page=1&slider1=3&slider2=5&slider3=4

you could put all the sliders into a <form> element and then just use serialize http://api.jquery.com/serialize/
ramesh4046Author Commented:
Thanks once again for commenting out. I was trying to do with ajax only. But it did not suit the kind of work that I was doing. Let me give you an overview of what am trying to achieve.

- I have a CSV file which I get dynamically from another program. I do not know the total rows/columns contents anything beforehand.

- I display the CSV file in a paginated format with 20 rows displayed in each page. Also, I provide the user with the range sliders based on the total columns of the CSV file. So for example, if my CSV file has 5 columns, I will get 5 sliders in the web page.

- When the user selects some range values from the sliders, the display of the CSV file should get updated dynamically.

- So, for example, if the CSV file contained 40 rows, the initial display would be 2 pages where each page contains 20 rows.

- After setting the ranges in the UI sliders, if the total rows is 10, I need to display only one page with the 10 rows and the option to navigate to the second page should not be present.

- However, if I have 30 rows returned as per the UI sliders, I need to display the 20 rows in the first page and the remaining 10 rows in the second page. In this case, the link to the second page should be present.

I am displaying the entire CSV file using the  index.php file. I am including the sliders and the dynamic display of the CSV file is taken care in the slider.php file. The slider.php file contains the javascript code to take care of the dynamic display. I have to update something here only. But am not sure of how to do it. Can you please look into my code and suggest me the required changes on my code?

Please let me know if you need more information.
This is actually pretty complicated stuff, and the best solution would be to use ajax to reload the data as needed. I could not figure out in your code where you produce the paging links.

But, check out the jquery serialize function as it might have what you need.
ramesh4046Author Commented:
I do not produce the paging links. I actually use the pagination interface and call it as below in my index.php file.

$pagedResults = new Paginated($names, 20, $page);

I use the already existing functionality to achieve the pagination. It took me almost a week to figure out on how to include the pagination for CSV display, since I am completely new to scripting languages.
ramesh4046Author Commented:
I tried to modify the code including serialize (). However, if I use serialize to my console output, the dynamic update is not happening.

window.console && console.log(masterData,count).serialize();

Open in new window

Can you please let me know how can I modify the program so that the dynamic update of the display of CSV file happens correctly?

Please let me know if you need more information.
I think this is beyond my scope. Sorry.
Eddie ShipmanAll-around developerCommented:
A better approach would be to use something like AngularJS to accomplish this along with maybe an ng-grid. Let me see if I can work up a jsFiddle for you tonight or tomorrow.
ramesh4046Author Commented:
Thanks for your comment. Can you please provide me some code sample if possible?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.