Jump to content

To get the pagination for the schedules to work


Strider

Recommended Posts

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.**

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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

<?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,

Link to comment
Share on other sites

  • 1 month later...

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>

Link to comment
Share on other sites

  • 2 months later...
  • 7 months later...
  • 2 weeks later...
  • 5 months later...

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

Link to comment
Share on other sites

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>

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