Strider Posted June 13, 2011 Report Share Posted June 13, 2011 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.** 3 Quote Link to comment Share on other sites More sharing options...
James142 Posted June 13, 2011 Report Share Posted June 13, 2011 I could never get the pagination to work, Thanks!! +1 Quote Link to comment Share on other sites More sharing options...
Strider Posted June 13, 2011 Author Report Share Posted June 13, 2011 No Problem, took me ages to get it to work myself haha. 2 Quote Link to comment Share on other sites More sharing options...
Strider Posted June 13, 2011 Author Report Share Posted June 13, 2011 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. 1 Quote Link to comment Share on other sites More sharing options...
James142 Posted June 13, 2011 Report Share Posted June 13, 2011 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 Quote Link to comment Share on other sites More sharing options...
Strider Posted June 13, 2011 Author Report Share Posted June 13, 2011 Edit the css files that come with the datatables. 2 Quote Link to comment Share on other sites More sharing options...
James142 Posted June 13, 2011 Report Share Posted June 13, 2011 Edit the css files that come with the datatables. Got it, I was editing the wrong file... how embarrassing 1 Quote Link to comment Share on other sites More sharing options...
Strider Posted June 13, 2011 Author Report Share Posted June 13, 2011 Don't worry, that happens to us all. 2 Quote Link to comment Share on other sites More sharing options...
savagegrave Posted June 18, 2011 Report Share Posted June 18, 2011 great coding thanks for sharing Quote Link to comment Share on other sites More sharing options...
Strider Posted June 18, 2011 Author Report Share Posted June 18, 2011 I didn't code this, just showing how to get it to work with phpvms Quote Link to comment Share on other sites More sharing options...
Moderators Kyle Posted June 19, 2011 Moderators Report Share Posted June 19, 2011 This does look interesting. I might give it a try tomorrow morning. Thanks for sharing. Quote Link to comment Share on other sites More sharing options...
Strider Posted June 19, 2011 Author Report Share Posted June 19, 2011 No Problem. Quote Link to comment Share on other sites More sharing options...
Jon Posted October 8, 2011 Report Share Posted October 8, 2011 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 Quote Link to comment Share on other sites More sharing options...
Strider Posted October 9, 2011 Author Report Share Posted October 9, 2011 I will have a look see If they can be moved. 1 Quote Link to comment Share on other sites More sharing options...
Strider Posted October 15, 2011 Author Report Share Posted October 15, 2011 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. Quote Link to comment Share on other sites More sharing options...
tutmeister Posted October 15, 2011 Report Share Posted October 15, 2011 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">' }); } ); 2 Quote Link to comment Share on other sites More sharing options...
bunoire14 Posted October 31, 2011 Report Share Posted October 31, 2011 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, Quote Link to comment Share on other sites More sharing options...
flyalaska Posted December 11, 2011 Report Share Posted December 11, 2011 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> Quote Link to comment Share on other sites More sharing options...
Strider Posted December 12, 2011 Author Report Share Posted December 12, 2011 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? Quote Link to comment Share on other sites More sharing options...
mattia Posted February 17, 2012 Report Share Posted February 17, 2012 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 Quote Link to comment Share on other sites More sharing options...
Strider Posted February 18, 2012 Author Report Share Posted February 18, 2012 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. Quote Link to comment Share on other sites More sharing options...
Moderators Parkho Posted October 2, 2012 Moderators Report Share Posted October 2, 2012 I can't get it to work Help! Quote Link to comment Share on other sites More sharing options...
Strider Posted October 15, 2012 Author Report Share Posted October 15, 2012 What exactly is happening? Any erros showing? Quote Link to comment Share on other sites More sharing options...
Moderators Parkho Posted October 15, 2012 Moderators Report Share Posted October 15, 2012 What exactly is happening? Any erros showing? Ha ha, never mind I resolved the issue. Thanks though. Quote Link to comment Share on other sites More sharing options...
Strider Posted October 15, 2012 Author Report Share Posted October 15, 2012 Sorry I did not see this earlier. How did you fix it? What was the problem? Quote Link to comment Share on other sites More sharing options...
Moderators Parkho Posted October 15, 2012 Moderators Report Share Posted October 15, 2012 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. Quote Link to comment Share on other sites More sharing options...
Txmmy83 Posted March 17, 2013 Report Share Posted March 17, 2013 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 :-( Quote Link to comment Share on other sites More sharing options...
flyalaska Posted March 20, 2013 Report Share Posted March 20, 2013 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> Quote Link to comment Share on other sites More sharing options...
Strider Posted March 20, 2013 Author Report Share Posted March 20, 2013 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. Quote Link to comment Share on other sites More sharing options...
mseiwald Posted March 20, 2013 Report Share Posted March 20, 2013 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.