Jump to content

To get the pagination for the schedules to work


Strider

Recommended Posts

This is how I would do it

Add this to your core/modules/Pilots/Pilot.php

	/***
	**
	** Retrieve a list of all pilots
	** @return json response
	***/
	public function getpilotsjson()
	{
		
		$allpilots = PilotData::getAllPilots();
		if(!$allpilots)
		{
			$allpilots = array();
		}
		
		# Form the json header
		$json = array(
			'rows' => array()
		);
		
	# Add each row to the above array
		foreach($allpilots as $row)
		{
			$statuses = Config::get('PILOT_STATUS_TYPES');
			foreach ($statuses as $status) {
				if($row->retired == '0') {
					$status = '<font color="green">Active</font>';
				} elseif($row->retired == '1') {
					$status = '<font color="red">Inactive</font>';
				} elseif($row->retired == '2') {
					$status = '<font color="red">Banned</font>';
				} elseif($row->retired == '3') {
					$status = '<font color="blue">On Leave</font>';
				} else {
					$status = '<font color="grey">Unknown</font>';
				}
			}

			$pilotname = $row->firstname.' '.$row->lastname;
			$pilotid = ''.PilotData::getPilotCode($row->code, $row->pilotid);
			$rank = '<img src="'.$row->rank_image.'" alt="'.$row->rank.'" />';
			
			$tmp = array(
				'pilotid' => $pilotid,
				'pilotname' => $pilotname,
				'rank' => $rank,
				'flights' => $row->totalflights,
				'hours' => $row->totalhours,
				'status' => $status,
			);
			
			$json['rows'][] = $tmp;
		}
		
		header("Content-type: text/x-json");
		echo json_encode($json);
	}

then in your pilots_list.php file

<?php if(!defined('IN_PHPVMS') && IN_PHPVMS !== true) { die(); } ?>
<style>
.text-center {
	text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jq-2.2.3/dt-1.10.12/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
	$('#pilotslist').dataTable({
		lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
		ajax: {
			url: '<?php echo SITE_URL;?>/action.php/Pilots/getpilotsjson',
			dataSrc: 'rows'
		},
		columns: [
			{ data: 'pilotid', sClass: "text-center"},
			{ data: 'pilotname', sClass: "text-center" },
			{ data: 'rank', sClass: "text-center" },
			{ data: 'flights', sClass: "text-center" },
			{ data: 'hours', sClass: "text-center" },
			{ data: 'status', sClass: "text-center" }
		]
	});
});
</script>


<h3><?php echo $title?></h3>
<?php
if(!$pilot_list) {
	echo 'There are no pilots!';
	return;
}
?>
<table id="pilotslist">
	<thead>
		<tr>
			<th class="text-center">Pilot ID</th>
			<th class="text-center">Name</th>
			<th class="text-center">Rank</th>
			<th class="text-center">Flights</th>
			<th class="text-center">Hours</th>
			<th class="text-center">Status</th>
		</tr>
	</thead>
	<tbody>
	<?php /* Dynamically fill this in.... */ ?>
	</tbody>
</table>

Feel free to mess around with the css/jQuery stuff at the top to get it working for you, but that's what I use to retrieve it. If that still doesn't work for you, I've done it so that you should be able to go into your local.config.php file and find PILOTID_LENGTH & OFFSET and edit them until you're satisfied.

Link to comment
Share on other sites

Mine works now with the original code I posted. Apparently when I was refreshing the page I was not selecting the correct column to sort ( or not selecting one at all and letting it use the default), as soon as I selected the Pilot ID column, it ordered it correctly, even by the airline codes. I will say though I have 4 places in all my pilot ID's and flyalaska only has 3 in some of this lower numbers, so not sure if his will work.

2017-01-27_2148

 

Further detail:

2017-01-27_2149

 

Link to comment
Share on other sites

18 minutes ago, flyalaska said:

It works like it should when I change to a 4 digit code. Will that affect any of the pilot data if keep it a 4 digits?

I don't think so, what function are you using to keep it as 4 digits? As long as the original number in the DB is the same, then you should be all good.

Link to comment
Share on other sites

2 hours ago, flyalaska said:

in local.config.php


Config::Set('PILOTID_LENGTH', 3); // The length of PID, including 0's

 

Yeah that was the code I was talking about earlier that I thought might be causing a problem. So you had it set to 3 and changed it to 4? When I look at your site it is still some 3 digit pilot ID's like AKA100 etc... and it is not ordered properly. Did you change it on a test server?

Link to comment
Share on other sites

9 hours ago, jnascar said:

Yeah that was the code I was talking about earlier that I thought might be causing a problem. So you had it set to 3 and changed it to 4? When I look at your site it is still some 3 digit pilot ID's like AKA100 etc... and it is not ordered properly. Did you change it on a test server?

I haven't changed it yet. Have to let everyone know ahead of time. Pilot numbers will be changing. Some people login with their pilot number.

Link to comment
Share on other sites

1 hour ago, flyalaska said:

I haven't changed it yet. Have to let everyone know ahead of time. Pilot numbers will be changing. Some people login with their pilot number.

Ok, it shouldn't change how everything works behind the scenes as it's just using a function to place zeros on the left of the pilotid until the length of it reaches what you've defined, purely for display, however the original number should remain the same across the board.

Link to comment
Share on other sites

web541,

I had this working once and can not find the original code I had it working in. 

I need to add only the BOLD order part:

$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 3, "desc" ]]
    } );
} );
 
To this:
 
<script type="text/javascript">
$(document).ready(function() {
$('.table').dataTable({
  "sPaginationType": "full_numbers",
  "lengthMenu": [ [ 5, 20, 40, -1], [ 5, 20, 40, "All"] ]
});
});
</script>
 
I had this working once and know I have it somewhere but can not find it. I will say the column order is kind of funky as I have to use like column 2, which is really column 3 to get it to work. I guess it is ignoring a column or something. With the ordering code added you can set for instance Pilot ID to be the default ordering column, ( or any column with data )! Of course images and ranks don't work. You just have to mess with it to find the correct column you need ordered :) And of course you can change desc to asc depending on how you want it to order.
 
 
Thanks,
Edited by jnascar
Link to comment
Share on other sites

Got it working. If I had been paying attention, I would have noticed I only needed a comma on the line above...duh!!!!!

Working DataTable code with length options and now ordering options. You can add or change ton's of stuff in the DataTables code:

 

<script type="text/javascript">
$(document).ready(function() {
$('.table').dataTable({
  "sPaginationType": "full_numbers",
  "lengthMenu": [ [ 5, 20, 40, -1], [ 5, 20, 40, "All"] ],
   "order": [[ 2, "asc" ]]
});
});
</script>


<table class="table">

( your phpVMS code goes here, like pilot list code, pirep viewall code, etc...)

</table>

You can see now it starts off ordering the Pilot ID column.

https://www.screencast.com/t/KZZuQsWv

Notice I have a 2 in the order although it is column 3 from the left.

Edited by jnascar
Link to comment
Share on other sites

38 minutes ago, jnascar said:

Got it working. If I had been paying attention, I would have noticed I only needed a comma on the line above...duh!!!!!

Working DataTable code with length options and now ordering options. You can add or change ton's of stuff in the DataTables code:

 

<script type="text/javascript">
$(document).ready(function() {
$('.table').dataTable({
  "sPaginationType": "full_numbers",
  "lengthMenu": [ [ 5, 20, 40, -1], [ 5, 20, 40, "All"] ],
   "order": [[ 2, "asc" ]]
});
});
</script>


<table class="table">

( your phpVMS code goes here, like pilot list code, pirep viewall code, etc...)

</table>

You can see now it starts off ordering the Pilot ID column.

https://www.screencast.com/t/KZZuQsWv

Notice I have a 2 in the order although it is column 3 from the left.

Can you share you code on the pilots avatar?

Link to comment
Share on other sites

  • Administrators

That code works great! And I just started reading about all the options that are available.

I have the code working in Schedules and View PIREPS. One issue I'm having is the placement of the First, Previous, Next, Last and page selection numbers. Right now they show in a vertical column on the lower right side of each paginated page. Is there a way to move them and possible style them into buttons?

Thanks!

Link to comment
Share on other sites

2 hours ago, ProAvia said:

That code works great! And I just started reading about all the options that are available.

I have the code working in Schedules and View PIREPS. One issue I'm having is the placement of the First, Previous, Next, Last and page selection numbers. Right now they show in a vertical column on the lower right side of each paginated page. Is there a way to move them and possible style them into buttons?

Thanks!

Show us your link or links please. Are you using the CDN script's that get's the styling and so forth for the DataTables? There should be no reason why you have to make them buttons. Now sure if it matter's or not but is your template bootstrap? It should look similar to this, although might not be exactly.

2017-01-28_1958

I will say one thing I can not get to work most of the time, is the X that should let you clear the search and take you back to your default ordering. Not  sure how to fix this? But I really want to get it to work at some point. Any ideas anyone? How to get the X, for clearing the field to work?

From the DataTables website:

2017-01-28_2001

Yeah the DataTables are amazing. Trying to figure out some of the options and getting them to work sometimes takes awhile. Like I have tried some of the styling options, but I think my main css style sheets are taking over at times. I can get the bootstrap table styling to work, but not the DataTable styling. Might be another CDN link I need :)

See the X for clearing and starting over is working in this template. It's really nice when it works. Just easier to clear and start over your new search!

2017-01-28_2019

 

Edited by jnascar
Link to comment
Share on other sites

  • Administrators

I believe I am using CDN scripts - just not sure I have all the ones I need. Besides the 2 calls shown in the file contents, are there others I need? Not using a bootstrap skin. The Show and Search boxes don't line up horizontally either.

Schedules_zps3efrw9nh.jpg

Contents of schedule_results.php

<?php if(!defined('IN_PHPVMS') && IN_PHPVMS !== true) { die(); } ?>
<?php
if(!$schedule_list)
{
	echo '<p align="center">No routes have been found!</p>';
	return;
}
?>
<!-- <table id="tabledlist" class="tablesorter"> -->

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"/>
 <script type="text/javascript" src="https://cdn.datatables.net/v/bs/jq-2.2.3/dt-1.10.12/datatables.min.js"></script> 

<script type="text/javascript">
 $(document).ready(function() {
 $('#schedules').dataTable({
   "sPaginationType": "full_numbers",
   "lengthMenu": [ [5, 10, 20, 50, -1], [5, 10, 20, 50, "All"] ]
 });
 });
 </script>
 <table id="schedules" class="table"> 


<thead>
<tr>
	<th>Flight Info</th>
	<th>Options</th>
</tr>
</thead>
<tbody>
<?php foreach($schedule_list as $schedule) { ?>
<tr>
	<td>
		<a href="<?php echo url('/schedules/details/'.$schedule->id);?>"><?php echo $schedule->code . $schedule->flightnum?>
			<?php echo '('.$schedule->depicao.' - '.$schedule->arricao.')'?>
		</a>
		<br />
		
		<strong>Departure: </strong><?php echo $schedule->deptime;?> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>Arrival: </strong><?php echo $schedule->arrtime;?><br />
		<strong>Equipment: </strong><?php echo $schedule->aircraft; ?> (<?php echo $schedule->registration;?>)  <strong>Distance: </strong><?php echo round($schedule->distance . Config::Get('UNITS'), 1);?>
		<br />
		<strong>Days Flown: </strong><?php echo Util::GetDaysCompact($schedule->daysofweek); ?><br />
		<?php echo ($schedule->route=='') ? '' : '<strong>Route: </strong>'.$schedule->route.'<br />' ?>
		<?php echo ($schedule->notes=='') ? '' : '<strong>Notes: </strong>'.html_entity_decode($schedule->notes).'<br />' ?>
		<?php
		# Note: this will only show if the above code to
		#	skip the schedule is commented out
		if($schedule->bidid != 0) {
			echo 'This route has been bid on';
		}
		?>
	</td>
	<td nowrap>
		<a href="<?php echo url('/schedules/details/'.$schedule->id);?>">View Details</a><br />
		<a href="<?php echo url('/schedules/brief/'.$schedule->id);?>">Pilot Brief</a><br />
		
		<?php 
		# Don't allow overlapping bids and a bid exists
		if(Config::Get('DISABLE_SCHED_ON_BID') == true && $schedule->bidid != 0) {
		?>
			<a id="<?php echo $schedule->id; ?>" class="addbid" 
				href="<?php echo actionurl('/schedules/addbid/?id='.$schedule->id);?>">Add to Bid</a>
		<?php
		} else {
			if(Auth::LoggedIn()) {
			 ?>
				<a id="<?php echo $schedule->id; ?>" class="addbid" 
					href="<?php echo url('/schedules/addbid');?>">Add to Bid</a>
			<?php			 
			}
		}		
		?>
	</td>
</tr>
<?php
 /* END OF ONE TABLE ROW */
}
?>
</tbody>
</table>
<hr>

Thanks!

Edited by ProAvia
Link to comment
Share on other sites

ProAvia,

For some reason I have had trouble trying to get it to work with the schedule results page at the moment. But really haven't tried a lot. For one thing your table should fill the entire width. Something is wrong and probably that is messing up your other items, like the pagination at the bottom. Fix that first with out the DataTable code and than add the DataTable code.

Should look similar to this before the DataTable code:

 

2017-01-28_2241

Try

<table id="table" class="table">

or

<table class="table">

and see if that makes it fill almost the entire page.

Link to comment
Share on other sites

  • Administrators

The pic was using 'FrontSchedules'. But i checked via 'schedules' and it is full width, with the same issues mentioned.

Thanks for the reply! I will have a closer look tomorrow and try your suggestions. Worst case, I try it on a new install with all default files and default skin.

EDIT: In thinking about it a bit more, both FrontSchedules and schedules uses the same template file to display the search results. I wonder why schedules displays full width and FrontSchedules doesn't.

Edited by ProAvia
Link to comment
Share on other sites

For me in the schedule results I always have an issue with it messing up the search form, when I apply the DataTables. On my test sites I have to use the javascript no conflict code to get DataTables to work for me.

Once again I would try to get the width working without any DataTable code or links to DataTable  styling and so forth and than go from there. But like I said I have always had issue's trying to get it to work with the schedule results. If I get the results working with DataTables it messes up the search form horribly. Not sure why yet.

2017-01-29_1359

Let us know,

Link to comment
Share on other sites

1 minute ago, jnascar said:

For me in the schedule results I always have an issue with it messing up the search form, when I apply the DataTables. On my test sites I have to use the javascript no conflict code to get DataTables to work for me.

Once again I would try to get the width working without any DataTable code or links to DataTable  styling and so forth and than go from there. But like I said I have always had issue's trying to get it to work with the schedule results. If I get the results working with DataTables it messes up the search form horribly. Not sure why yet.

2017-01-29_1359

Let us know,

I'm gonna guess that datatables uses an updated version of jQuery here, and the tabs for the schedule results uses an older version with deprecated functions, therefore the two don't like each other. Few fixes for this, use jQuery.noConflict on the tabs, try and update the tabs to the newer version of jQuery, use or make a schedule search option yourself thus removing the tabs altogether or making your own compatible with the latest versions.

Link to comment
Share on other sites

You mean the tabs in the search form like this:

<div id="tabcontainer">

<li><a href="#depapttab"><span>By Departure Airport</span></a></li>
        <li><a href="#arrapttab"><span>By Arrival Airport</span></a></li>
        <li><a href="#airlinetab"><span>By Airline</span></a></li>
                <li><a href="#aircrafttab"><span>By Aircraft Type</span></a></li>

So forth and so on....

I have added this code to the page but no luck on search form or results. This is what I have in my layout.php file too to get DataTables to work on my other pages.

<script>
jQuery.noConflict();
</script>

I must say I am very confused about this. Can you give an example(s) of a fix to guide me please... I would really like to get DataTables working on my schedules page.

Thanks,

Link to comment
Share on other sites

Accidentally got rid of the default Search Form, which I really don't need anyway because DataTable Search does everything. I would still like to get it to work, or make another version to work.

2017-01-29_1434

That's really all I need. You can search for anything the default search for does :) Although I got ride of the search form by accident...need to figure out how and why...well I know it was the No Conflict code and where and how I placed it :)

But heck this works really well...I think!

Well actually it does not as now I get a No Routes Passed error.....

Really odd some times it works, sometimes I get the No Routes Passed...strange!

Edited by jnascar
Link to comment
Share on other sites

  • Administrators

I messed with the width and was able to set it to 100% and to 80% with no change in the button display. Then I went to datatables.net and started playing around with their download options. I am using a NON-bootstrap skin - and I think that may have been part of my issue.

I changed this: <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"/>

To this: <link rel="stylesheet"String type="text/css"String href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/b-1.2.4/datatables.min.css"String/>

And now, while I still have the words at the bottom, they run horizontally rather than vertically.

Here's the line right after closing script </script>:  <table id="schedules" class="table" width="80%" align="center"> ---- aligns table center @ 80% width, which looks better then aligned left @ full width on my particular template.

I'll be playing around with the other options at datatables.net to see if I can get the buttons to show.

Link to comment
Share on other sites

ProAvia,

Show us a screenshot or provide a link. Does it look like this:

2017-02-01_2344

 

Instead of this:

2017-02-01_2346

These are 2 different templates. And actually the one at the top when you hover over the numbers, or next, last, etc... has a hover effect. Does yours? Best thing is to show a screen shot while hovering if you can, or even better a link.

Link to comment
Share on other sites

  • Administrators

Mine is like your first pic - with the hover effect. I'd provide a link, but most pages on the site require a user to be logged in (something else on my list to change a bit). 

So, it's a template - cool. Is there an easy way to change to the template to get a display as in your lower pic?

Link to comment
Share on other sites

ProAvia,

No it is not a template. Those are 2 different templates of mine. And my second template has pagination code already in it and styled, so I just had to find the right DataTable styling to pull it out. If that makes sense :) I am trying to get the first picture to look like the second one but have not figured it out myself yet. I am pretty sure the DataTable code is pulling information that works with my templates. For example, my second picture ( The RED one) is heavily relying on Bootstrap and my second templates is basically built on Bootstrap so the DataTable CDN code is pulling the right info ( the DataTable stylesheet link).

You really just have to mess with it and see if it works. There is a page on DataTable that you can choose what you want and it adds it to the DataTable style and script codes. You just have to mess around and see if it works out. Or dig deep in the code and figure it out yourself.

It's called the Download Builder:

https://www.datatables.net/download/index

It's kind of hard to understand at first. I just selected the styling options I wanted until it worked. You choose what you want, I think I ONLY choose the Bootstrap option at first and tried it.

2017-02-02_1533

And than it generated the codes at the bottom to try. I mixed and matched them, and finally it worked on my RED template :)

2017-02-02_1535

BACKUP, BACKUP, BACKUP your original file before trying this. You might just get lucky :) Also, if you have another template or skin try it on that one too and see what happens. Also, be careful that the generated code does not cause a No Routes Passed Error, check often!

Good luck,

Edited by jnascar
Link to comment
Share on other sites

  • Administrators

Thanks, I'll definitely look into it after I resolve my Pilot Pay issue ( https://forum.phpvms.net/topic/24313-flight-time-separator/ ) - I've been getting some excellent help from web541 in correcting that issue and am almost there. Pagination is the next thing on the list. Now to find the time to complete it all.

I will post back when I find the magic combination. I certainly hope at least basic pagination is included with version 3.

 

Edited by ProAvia
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...