Jump to content

Wondering: Pagination for Pireps List


selwynorren

Recommended Posts

  • Moderators

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

Link to comment
Share on other sites

  • 2 months later...

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>

tablesorter.jpg

Link to comment
Share on other sites

  • Moderators

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 :)

Link to comment
Share on other sites

  • 2 months later...

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

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • Moderators

Ok, I'm bringing this up again, :lol:

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! :D

Link to comment
Share on other sites

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">

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...
  • Moderators

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...
  • Moderators

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.

Link to comment
Share on other sites

  • Moderators

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...