Wondering: Pagination for Pireps List

[selwynorren]

ok Excellent,

Maybe once this is all sorted, we can add it to the code snippets forum?

[joeri]

i alos got it working special thanks to selwyn.

1 question i implemented it also to my second website but now its givving me a headake

in the schedulles it now has made some style changes iff you look at the link you will see all the white boxes how can i let these dissapear

linkcitybird schedulles

thanks in advance joeri

[selwynorren]

Joeri

In you class called "Odd" what is your background color set to? seems like the "even" class does not have a background color and your "odd" class does

[faraz]

Hi

<script type="text/javascript" src="<?php echo fileurl('lib/js/jquery.tablesorter.js');?>"></script> 
<script type="text/javascript" src="<?php echo fileurl('lib/js/jquery.tablesorter.pager.js');?>"></script>
<script type="text/javascript">
$(function() {
	$("table")
		.tablesorter({widthFixed: true})
		.tablesorterPager({container: $("#pager")});
});
</script>

and

<div id="pager" class="pager" >
       <form>
               <img src="<?php echo fileurl('lib/images/first.png');?>" class="first"/>
               <img src="<?php echo fileurl('lib/images/prev.png');?>" class="prev"/>
               <input type="text" class="pagedisplay"/>
               <img src="<?php echo fileurl('lib/images/next.png');?>" class="next"/>
               <img src="<?php echo fileurl('lib/images/last.png');?>" class="last"/>
	<select class="pagesize">
                       <option value="10">10 per page</option>                 
                       <option value="15">15 per page</option>
                       <option value="25">25 per page</option> 
                       <option value="30">30 per page</option>
               </select>
       </form>
</div>

[mark1million]

i alos got it working special thanks to selwyn.

1 question i implemented it also to my second website but now its givving me a headake

in the schedulles it now has made some style changes iff you look at the link you will see all the white boxes how can i let these dissapear

linkcitybird schedulles

thanks in advance joeri

Check your cell spacing for that table mate

[TAV1702]

Hi guys. There are so many instructions and add this and take a way that's going around here, I find it a bit confusing. Is there a how to guide that can be made or given out to say this is exactly how you do this? Just curious.

Thanks in advance either way.

Ray

[selwynorren]

Hi guys. There are so many instructions and add this and take a way that's going around here, I find it a bit confusing. Is there a how to guide that can be made or given out to say this is exactly how you do this? Just curious.

Thanks in advance either way.

Ray

Hi Ray,

Its relatively easy to do. The most important thing to realize is in the table sorter javascript, you will need to mod (if required) the default quantity of lines to show/ Thats the only Mod really required nowadays.

To do this. Open your JS file called "jquery.tablesorter.pager.js"

Scroll down to line 103 and change the property size: 5. (Mine says 5 O don't remember what the original one was)

Remember this is the default row list quantity. You only change this if you really want to.

The rest of the building of the sorter all works ion how you build the table

You can start your table as follows:

<table id="tabledlist" class="tablesorter">

This is very very important, without that ID and that Class Set, it will not work as expected (This is for the sorting portion of this javascript.

The you need to build the header column, again this for for the sorting of each column, this will also define how the pagination will work. Separating headings from data

<thead>
 <tr>
 <th>Image</th>
 <th>Description</th>
 <th>Link</th>
 </tr>
</thead>

Each column must have <thead> <th> and not <td>

Next you place the body code, this will be the portion that will actually have the pagination

<tbody>
<?php
foreach($values as $value)
{
?>
 <tr>
   <td>Insert your text and php code combinatins</td>
   <td>Insert your text and php code combinatins</td>
   <td>Insert your text and php code combinatins</td>
 </tr>
<?php
}
?>
</tbody>

You can then end it off with the usual

</table>

Now after the </table> tag all you need to do is place the following code:

<div align="right" id="pager" class="pager">
<form>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/first.png" class="first"/>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/prev.png" class="prev"/>
	<input align="middle" type="text" class="pagedisplay" size="5"/>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/next.png" class="next"/>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/last.png" class="last"/>
	<select class="pagesize">
		<option value="5">5 per page</option>
		<option value="10">10 per page</option>
		<option value="20">20 per page</option>

	</select>
</form>
</div>
<script defer="defer">
$(document).ready(function() 
   { 
       $("#tabledlist")
	.tablesorter({widthFixed: true, widgets: ['zebra']})
	.tablesorterPager({container: $("#pager")}); 
   } 
); 
</script>

That positions where the actual next, back, first, last page of page etc buttons will appear. As you can see there is also a handy drop down that will allow you to customize how many line to view per page. As I mentioned I had changes the default in my JS file, so I started my drop down code with 5.

I hope this all make sense

Take Care

[selwynorren]

Hi Nabeel,

Your probably right, but it honestly works fine just the way I described it above. we have used it extensively over at www.fltaka.com. We have even managed to use the table sort portion alone without the pagination. it really work quite well.

[Kyle]

Ok, I'm bringing this up again,

I just got into doing it, and It's not working, I followed Oren's Instructions on how to put it in.

But It didn't work, I'm not sure what I am missing. Anyone help me please. Thanks!

[Kyle]

I'll attach the piece of the code from my PIREP.tpl

CODE REMOVED BY VANSERS

[Guest lorathon]

Just from a quick look you definitely need to use the id and class on the table that is holding the pireps. You have a table in a table in a table.

[Kyle]

Yeah, I can see that, but that's the way my PIREP listing is styled into that......

IMAGE REMOVED BY VANSERS

So I think that's the issue,

So I have to put something in side the Table, Table......?

[Guest lorathon]

This is part of the code you put up

<table id="tabledlist" class="tablesorter">
<table width="790">
 <tr>
   <td>

       <table width="100%" cellpadding="4" cellspacing="0">

Try like this

<table>
<table width="790">
 <tr>
   <td>      
       <table width="100%" cellpadding="4" cellspacing="0" id="tabledlist" class="tablesorter">

[Guest lorathon]

You also may need to move the navigation up in the table tree. Not sure about that one though.

[Kyle]

Well, now it's working, Thanks for your help this evening.

I can do the rest, I just have to move stuff around to get my table in the way.

Reps Awarded!!

[CPC900]

Ok, I am going to try this out. My first question is, does the screenshot_viewer.tpl already have pagination incorporated in it?! I assume not, although it has the resemblance in the code/module by simpilot.

I want to make it only show 5 rows of images for the first page, but it shows them all.

[Strider]

Yes that does have pagination incorporated in it.

[CPC900]

Ok, so in that case, what setting do I need to change to have only, say 20 images a page. Mine seems to keep ALL images on the same page?!?

[Kyle]

By what I can tell to your problem.....

That the pager thing isn't working.

But maybe tonight I can try to incroppeate that pager thing in the screenshot and the see how it goes. Hope I can try to get it.

It's so damn easy! For my pilots PIREP listing and schedules! Easy as quick.

I plan to do the screenshots. I'll see if i can get it in. Then I'll post a guide here to how to do it.

[TAV1702]

Hi Ray,

Its relatively easy to do. The most important thing to realize is in the table sorter javascript, you will need to mod (if required) the default quantity of lines to show/ Thats the only Mod really required nowadays.

To do this. Open your JS file called "jquery.tablesorter.pager.js"

Scroll down to line 103 and change the property size: 5. (Mine says 5 O don't remember what the original one was)

Remember this is the default row list quantity. You only change this if you really want to.

The rest of the building of the sorter all works ion how you build the table

You can start your table as follows:

<table id="tabledlist" class="tablesorter">

This is very very important, without that ID and that Class Set, it will not work as expected (This is for the sorting portion of this javascript.

The you need to build the header column, again this for for the sorting of each column, this will also define how the pagination will work. Separating headings from data

<thead>
 <tr>
 <th>Image</th>
 <th>Description</th>
 <th>Link</th>
 </tr>
</thead>

Each column must have <thead> <th> and not <td>

Next you place the body code, this will be the portion that will actually have the pagination

<tbody>
<?php
foreach($values as $value)
{
?>
 <tr>
   <td>Insert your text and php code combinatins</td>
   <td>Insert your text and php code combinatins</td>
   <td>Insert your text and php code combinatins</td>
 </tr>
<?php
}
?>
</tbody>

You can then end it off with the usual

</table>

Now after the </table> tag all you need to do is place the following code:

<div align="right" id="pager" class="pager">
<form>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/first.png" class="first"/>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/prev.png" class="prev"/>
	<input align="middle" type="text" class="pagedisplay" size="5"/>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/next.png" class="next"/>
	<img src="<?php echo SITE_URL?>/lib/skins/Skin_name/images/last.png" class="last"/>
	<select class="pagesize">
		<option value="5">5 per page</option>
		<option value="10">10 per page</option>
		<option value="20">20 per page</option>

	</select>
</form>
</div>
<script defer="defer">
$(document).ready(function() 
   { 
       $("#tabledlist")
	.tablesorter({widthFixed: true, widgets: ['zebra']})
	.tablesorterPager({container: $("#pager")}); 
   } 
); 
</script>

That positions where the actual next, back, first, last page of page etc buttons will appear. As you can see there is also a handy drop down that will allow you to customize how many line to view per page. As I mentioned I had changes the default in my JS file, so I started my drop down code with 5.

I hope this all make sense

Take Care

+1 added. I forgot I even posted here about this. I will have to give it a shot and see what happens. I have been so dam busy doing other things, I completely forgot all about this until I looked at a very long schedules list.

Thanks again!

Ray

[Kyle]

Ray, if you have problems, let me know. I done that and it works awesome!

[Cor]

I have tried everything to get my schedules on pages, but it is getting frustrating. Maybe somebody can help me.

Regards,

Cor

[Kyle]

I have tried everything to get my schedules on pages, but it is getting frustrating. Maybe somebody can help me.

Regards,

Cor

Hey Cor, if you want my stock sechdules tpl file with the pager, let me know and I'll attach to it here.

[mark1million]

I have tried everything to get my schedules on pages, but it is getting frustrating. Maybe somebody can help me.

Regards,

Cor

Cor are you assigning the table the class and adding the javascript at the bottom of the page?

[Cor]

Hey Cor, if you want my stock sechdules tpl file with the pager, let me know and I'll attach to it here.

Yes please,

I can then maybe see what I am doing wrong

Regards,

Cor

[Cor]

Cor are you assigning the table the class and adding the javascript at the bottom of the page?

Hi Mark,

Yes I did, but no sorting

Regqrds,

Cor

[mark1million]

I Had big trouble as well getting this to work i left it for a few and when i went back to it it seemed to be OK.

Here is the file i use, i have stripped it down on other divs etc, see how that goes on you site. schedule_results.tpl

<?php
if(Auth::LoggedIn() == false)
{
  echo '<div id="error">You need to be a member to search the schedules</div>';
  return;
}
?>
<?php
if(!$allroutes)
{
echo '<p align="center">No routes have been found!</p>';
return;
}
?>
<table id="th" class="tablesorter" width="700" border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<th>Flight Info</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<?php
foreach($allroutes as $route)
{

/* Uncomment this code if you want only schedules which are from the last PIREP that
	pilot filed */
/*if(Auth::LoggedIn())
{
	$search = array(
		'p.pilotid' => Auth::$userinfo->pilotid,
		'p.accepted' => PIREP_ACCEPTED
	);

	$reports = PIREPData::findPIREPS($search, 1); // return only one

	if(is_object($reports))
	{
		# IF the arrival airport doesn't match the departure airport
		if($reports->arricao != $route->depicao)
		{
			continue;
		}
	}
}*/

/*
Skip over a route if it's not for this day of week
Left this here, so it can be omitted if your VA
 doesn't use this. 

Comment out these two lines if you don't want to.
*/

/*	Check if a 7 is being used for Sunday, since PHP
	thinks 0 is Sunday */
$route->daysofweek = str_replace('7', '0', $route->daysofweek);

if(strpos($route->daysofweek, date('w')) === false)
	continue;

/* END DAY OF WEEK CHECK */



/*
This will skip over a schedule if it's been bid on
This only runs if the below setting is enabled

If you don't want it to skip, then comment out
this code below by adding // in front of each 
line until the END DISABLE SCHEDULE comment below

If you do that, and want to show some text when
it's been bid on, see the comment below
*/
if(Config::Get('DISABLE_SCHED_ON_BID') == true && $route->bidid != 0)
{
	continue;
}
/* END DISABLE SCHEDULE ON BID */


/*	Skip any schedules which have aircraft that the pilot
	is not rated to fly (according to RANK), only skip them if
	they are logged in. */
if(Config::Get('RESTRICT_AIRCRAFT_RANKS') === true && Auth::LoggedIn())
{
	/*	This means the aircraft rank level is higher than
		what the pilot's ranklevel, so just do "continue"
		and move onto the next route in the list 
	 */
	if($route->aircraftlevel > Auth::$userinfo->ranklevel)
	{
		continue;
	}
}

/* THIS BEGINS ONE TABLE ROW */
?>

<tr>
<td>
	<a href="<?php echo url('/schedules/details/'.$route->id);?>"><?php echo $route->code . $route->flightnum?>
		<?php echo '('.$route->depicao.' - '.$route->arricao.')'?>
	</a>
	<br />

	<strong>Departure: </strong><?php echo $route->deptime;?>         <strong>Arrival: </strong><?php echo $route->arrtime;?><br />
	<strong>Equipment: </strong><?php echo $route->aircraft; ?> (<?php echo $route->registration;?>)  <strong>Distance: </strong><?php echo $route->distance . Config::Get('UNITS');?>
	<br />
	<strong>Days Flown: </strong><?php echo Util::GetDaysCompact($route->daysofweek); ?><br />
	<?php echo ($route->route=='') ? '' : '<strong>Route: </strong>'.$route->route.'<br />' ?>
	<?php echo ($route->notes=='') ? '' : '<strong>Notes: </strong>'.html_entity_decode($route->notes).'<br />' ?>
	<?php
	# Note: this will only show if the above code to
	#	skip the schedule is commented out
	if($route->bidid != 0)
	{
		echo 'This route has been bid on';
	}
	?>
</td>
<td nowrap>
	<a href="<?php echo url('/schedules/details/'.$route->id);?>">View Details</a><br />
	<a href="<?php echo url('/schedules/brief/'.$route->id);?>">Pilot Brief</a><br />

	<?php 
	# Don't allow overlapping bids and a bid exists
	if(Config::Get('DISABLE_SCHED_ON_BID') == true && $route->bidid != 0)
	{
	?>
		<a id="<?php echo $route->id; ?>" class="addbid" 
			href="<?php echo actionurl('/schedules/addbid');?>">Book Leg</a>
	<?php
	}
	else
	{
		if(Auth::LoggedIn())
		{
		 ?>
			<a id="<?php echo $route->id; ?>" class="addbid" 
				href="<?php echo url('/schedules/addbid');?>">Book Leg</a>
		<?php			 
		}
	}		
	?>
</td>
</tr>
<?php
/* END OF ONE TABLE ROW */
}
?>
</tbody>
</table>
<hr>
<div align="right" id="pager" class="pager">
       <form>
               <img src="<?php echo fileurl('lib/images/first.png');?>" class="first"/>
               <img src="<?php echo fileurl('lib/images/prev.png');?>" class="prev"/>
               <input type="text" class="pagedisplay"/>
               <img src="<?php echo fileurl('lib/images/next.png');?>" class="next"/>
               <img src="<?php echo fileurl('lib/images/last.png');?>" class="last"/>
               <select class="pagesize">
		   <option value="10">10 per page</option> 
                       <option value="50">50 per page</option>                 
                       <option value="100">100 per page</option>
                       <option value="500">500 per page</option> 
                       <option value="1000">1000 per page</option>
               </select>
       </form>
</div>
<script defer="defer">
$(document).ready(function() 
   { 
       $("#th")
	.tablesorter({widthFixed: true, widgets: ['zebra']})
	.tablesorterPager({container: $("#pager")}); 
   } 
); 
</script>
<br /><br />
</div>

Let me know how you get on with that.

[Cor]

Tnx mark,

I will have a look at it this weekend and let you know.

Regards,

Cor

[Cor]

Mark,

Does not work, seems that it is something with the script. Because it won´t chop the data up in pages.

Regards,

Cor

[mark1million]

I cant remember which js library this uses now, it maybe that its using something else than the stock, in fact i think it is, give me 5 minutes and ill post it up here.