To get the pagination for the schedules to work

[Strider]

This is a different version of the pagination that someone else posted a while back. I will explain how to install the code. Here goes.

To start off you will need the files for Datatables which can be obtained here.

unzip the files from the download, and have a look at the examples provided, which will also help you out. The main files from it needed are: jquery_dataTables.js, jquery_dataTables.min.js, jquery.js, the images from the images folder, one, both or none of the CSS files if you want to use those.

Secondly you will need core_htmlhead.tpl and the schedules_results.tpl file. Yes I know we shouldn't really edit the core_htmlhead.tpl, but it is the only way it will work, I tried not editing that, but just could not get it to work.

You will then need to open up the core_htmlhead.tpl file and link jquery_dataTables.js file there, You can link to the css files the normal way, though you don't need the css files provided, if you don't want to.

After that open up the schedule_results.tpl file and below the first piece of php paste the following:

	<script type="text/javascript">
$(document).ready(function() {
$('#schedule').dataTable( {
	"sPaginationType": "full_numbers"
} );
} );
	</script> 

change the #schedules to whatever id you have given the table, or class which then you would have to put .name. It isn't that hard to install, and looks good.

Then edit the table here is an example table to show how it is structured:

<script type="text/javascript">
$(document).ready(function() {
$('#mytable').dataTable( {
	"sPaginationType": "full_numbers"
} );
} );
	</script>

<table id="mytable" class="display"">
<thead>
<tr>
<th>table</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table body</td>
</tr>
</tbody>
</table>

You don't have to put class="display" into the table, you only need that, if you are using the css files provided. It gives the site a bit of a boost asthetically.

To view an excample of it click here.

This can also be used for any other table that is getting too long for your liking, you just change the #schedules to the relevant table id name. I hope it was easy to understand and follow this.

**To use this on the roster, you must use a single roster, not one broken up into hubs.**

[James142]

I could never get the pagination to work, Thanks!! +1

[Strider]

No Problem, took me ages to get it to work myself haha.

[Strider]

Just to add, you can try the other versions of it that are included in the download, and see what works for you. All that is needed is a change to the little bit of js code that you put above the table you want to use it for. They give you that code, so there isn't really any major coding needed.

[James142]

Are you able to re-size the the width of the table? When i try to re-size is in the .css nothing is happening

[Strider]

Edit the css files that come with the datatables.

[James142]

Edit the css files that come with the datatables.

Got it, I was editing the wrong file... how embarrassing

[Strider]

Don't worry, that happens to us all.

[savagegrave]

great coding thanks for sharing

[Strider]

I didn't code this, just showing how to get it to work with phpvms

[Kyle]

This does look interesting.

I might give it a try tomorrow morning. Thanks for sharing.

[Strider]

No Problem.

[Jon]

Dan,

I've got this working on my site but I want to move the location of each part of the pagination. (I want everything below the table.)

Any help would be appreciated

Jon

[Strider]

I will have a look see If they can be moved.

[Strider]

I am afraid there is no way I can see of moving the search and the drop down box to the bottom. I will look at the site, and ask them is there a way. But for now, you will just have to make do with the way it is. Sorry about that.

[tutmeister]

You can actually achieve this by changing your init code to include the following:

"sDom": '<"top"i>rt<"bottom"flp><"clear">'

More information on this can be found here. You might also want to look at the API to see what can be done to customize your datatable.So your basic initialization should look like the example below to get it working how you want it to. It will require a little CSS tweaking, as the default example falls half-way through the footer section.

$(document).ready(function() {
			oTable = $('#dataTables').dataTable({
				"bJQueryUI": true,
				"sPaginationType": "full_numbers",
				"sDom": '<"top"i>rt<"bottom"flp><"clear">'
			});
		} );

[bunoire14]

Hi Guys,

Nice tutorial, I managed to get this working without adding the links in the core_htmlhead.tpl though. I simply added the following link into my skin layout.tpl (Nabeel made it very easy in the default templates ):

<?php /*Any custom Javascript should be placed below this line, after the above call */ ?>
<script type="text/javascript" src="<?php echo fileurl('lib/js/jquery.dataTables.js');?>"></script>

I did not link the other two files, they weren't required. PHPVMS already calls jQuery so be sure not to link to the jquery.js included in the Datatables download as it will conflict and not execute correctly.

At present the changes are only on my development site, they will be appearing on the live site shortly, hope this helps anyone else looking to implement this,

All the best,

[flyalaska]

I am having some trouble getting this to work on my schedules results page. I have it on other pages, can't seem to get it to work on this page. I get an error when I have it set like the intructions and the way I have it on the other pages.

http://www.flyaka.com/images/table.png

       <script type="text/javascript">
$(document).ready(function() {
       $('#mytable').dataTable( {
               "sPaginationType": "full_numbers"
       } );
} );
               </script> 
<?php
if(!$allroutes)
{
echo '<p align="center">No routes have been found!</p>';
return;
}
?>
<table id="mytable" class="tablesorter"width="98%">
<thead>
 <tr id="tablehead">
       <th>Flight No.</th>
       <th>Route</th>
       <th>Aircraft</th>
       <th>Dep. Time</th>
       <th>Arr. Time</th>
       <th>Distance</th>
       <th>Options</th>
       </tr>
       </thead>

[Strider]

I replaced the jquery.js file nabeel had, as his one was outdated lol. I also found that if they were not in the core_htmlhead.tpl file I could not bid on any flight. Ed what is the error that comes up?

[mattia]

hi Daniel,

i created the table following your instructions but you can color the numbers and the words "first" "next" "last" "previous"

many thanks for table is very nice

[Strider]

Ed, try putting .mytable, as I think the hash is for class not for an ID. Also put the piece of JS below the php part, as it may be getting confused.

[Parkho]

I can't get it to work Help!

[Strider]

What exactly is happening? Any erros showing?

[Parkho]

What exactly is happening? Any erros showing?

Ha ha, never mind I resolved the issue. Thanks though.

[Strider]

Sorry I did not see this earlier. How did you fix it? What was the problem?

[Parkho]

Well, honestly, I used a different pagination that i found in a Google search and so far it's working just fine. The problem I had was that simply I wasn't able to get the pages paginated even though i followed the instructions.

[Txmmy83]

how should the entries look like

is this right:

in core_htmlhead

<script type="text/javascript" src="<?php echo SITE_URL?>/lib/js/jquery.dataTables.js"></script>

below my full schedule_result.tpl

<style type="text/css">
artarticle th, .artarticle td {
padding: 0px;
text-align: center;
vertical-align: middle;
border:none;
border-bottom: 1px dashed #5A7796;
}
.artarticle th {
padding: 2px;
text-align: center;
vertical-align: middle;
border:none;
}
.artarticle table, table.artarticle {
border:none;
border-collapse: collapse;
margin: 1px;
}
.artarticle img, img.artarticle, .artblock img, .artfooter img {
margin: 0px;
}
</style>
<?php
ini_set('date.timezone', 'Europe/Vienna');
if(!$allroutes)
{
 echo '<p align="center">No routes have been found!</p>';
 return;
}
?>
 <script type="text/javascript">
$(document).ready(function() {
 $('#schedule').dataTable( {
		 "sPaginationType": "full_numbers"
 } );
} );
		 </script>

		 <div>
<table border="none" class="display" id="schedule" width="1100px">
<thead>
<tr id="tablehead">
		 <th>Flight No.</th>
		 <th>Dep. Time</th>
		 <th>Dep. Airport</th>
		 <th>Su</th>
		 <th>Mo</th>
		 <th>Tu</th>
		 <th>We</th>
		 <th>Th</th>
		 <th>Fr</th>
		 <th>Sa</th>
		 <th>Arr. Time</th>
		 <th>Arr. Airport</th>
		 <th>Distance</th>
		 <th>Aircraft</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')) === true)
		 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 class="center">
		 <a href="<?php echo url('/schedules/details/'.$route->id);?>"><?php echo $route->code . $route->flightnum?></a>
 <td><?php echo $route->deptime;?></td>
 <td class="centre"><?php echo $route->depicao;?></td>
		 <?php
		 // We are gonna loop each day of the week
		 for($dayofweek = 0; $dayofweek < 7; $dayofweek++)
		 {
						 // echo our column opening
						 echo '<td class="centre">';

						 // Check if $i (the current day of week) exists
						 if(substr_count($route->daysofweek, $dayofweek) > 0)
						 {
										 // there is a flight for sunday , so echo that plane icon out
										 echo '<img src="http://www.flyeurope-va.org/lib/images/inair.png" height="24px" width="24px">';

						 }

						 // Close that column
						 echo '</td>';

		 }
		 ?>
 <td><?php echo $route->arrtime;?></td>
 <td class="center"><?php echo $route->arricao;?></td>
 <td><?php echo $route->distance . Config::Get('UNITS');?></td>
 <td><?php echo $route->aircraft; ?></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');?>">Add to Bid</a>
		 <?php
		 }
		 else
		 {
				 if(Auth::LoggedIn())
				 {
					 ?>
						 <a id="<?php echo $route->id; ?>" class="addbid"
								 href="<?php echo url('/schedules/addbid');?>">Add to Bid</a>
				 <?php				
				 }
		 }			
		 ?>
 </td>

<?php
/* END OF ONE TABLE ROW */
}
?>
</tbody>
</table>
</div>
<div class="spacer"></div>
<hr>

does not work yet :-(

[flyalaska]

What do you see? Errors , etc. If you have the same as me you should have a jquery.dataTables.min.js aswell. Looks like that we have the same one.

Try moving the paginate code after </table> and remove it from above.

<script type="text/javascript">

$(document).ready(function() {

$('#schedule').dataTable( {

"sPaginationType": "full_numbers"

} );

} );

</script>

[Strider]

having it above or not wont make much difference. Make sure you have the datatables CSS file there too. Also that you have the most up to date version of jqueri from google. post a link to the schedules so we can see if any errors show up.

[mseiwald]

Must not be that putting it below wont make a difference. On 2 of my pages it doesn't work when i have it on Top of the page but it works as soon as i put it to the bottom.