• This is a read only backup of the old Emudevs forum. If you want to have anything removed, please message me on Discord: KittyKaev

[PHP/JS]Need help with sorting table after color

leifus

leifus

Glorious
Hello, lately i have been trying to code something in PHP, but i have come acoross a little thing that i can't seem to figure out. I dunno if i am going to post here or in javascript, but yea.

I have been trying to sort a table after the color it is assigned too. The color it self is handeled by PHP and not the database and it is HEX color value.

So basicly i have three buttons at the top of my page and they have three diffrent colors, but when i click one of the i want it to sort after color of the button that i click on.


Here is the code:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Domene informasjon</title>

<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/jquery.restable.min.css" rel="stylesheet" type="text/css">
<link href="css/Fixed.css" rel="stylesheet" type="text/css">


<!-- JQuery og Bootstrap JS -->
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/jquery.restable.min.js"></script>
<script>

	$(document).ready(function() 
	{   
		$('#sorting_table').ReStable({
			rowHeaders: true, // if you want keep the row headers, else false. 
			maxWidth: 540 // Size to which the table become responsive
		});
		
		$("#domain").keyup(update);
		
		update();
	});

	$(window).resize(function() {
		if ($(window).width() <= 540)
		{
			$('#sorting_table_big').hide();
			$('#sorting_table_small').show();
		}
		else
		{
			$('#sorting_table_small').hide();
			$('#sorting_table_big').show();
			$('#popup').hide();
		}
		update();
		
	});
	
	var sorting = 'ASC';
	var field = 'ID';
	
	function update(element, newField)
	{
		if (newField !== undefined)
		{
			if (newField == field)
			{
				sorting = (sorting == 'ASC') ? 'DESC' : 'ASC';
			}
			else
			{
				field = newField;
				sorting = 'ASC';
			}
			$('#sorting_table_big th, #sorting_table_small th')
				.css({
					color: 'black'
				})
			;
			
			$(element)
				.css({
					color: 'blue'
				})
			;
		}
		
		$.ajax({
			type: "GET",
			url: "Ajax/searchDomain.action.php",
			data: {
				domain: $('input[name="domain"]').val(),
				sorting: sorting,
				field: field,
				width: $(window).width()
			},
			success: function(data) 
			{
				$("#container_domains").html(data).show();
			}
		});
	}
	
	
	function showDomain(id)
	{
		$.ajax({
			type: "POST",
			url: "Ajax/domainInfo.action.php",
			data: {
				id: id
			},
			success: function(data) {
				$('#popup').html(data);
			}
		});
		$('#popup').fadeIn('fast');
		$("#container_domains").hide();
	}

	function hidePopup()
	{
		$('#popup').hide();
		$('#container_domains').show();
	}
	
	function oppdater(id)
	{
		$.ajax({
			type: "POST",
			url: "script/script2.php",
			data:  {
					id: id
			},
			success: function(data)
			{
				location.reload(true);
			}
		});
	}
</script>

</head>
<body>

<style type="text/css">
.table-striped {
    padding: 0;
    margin: 0;
    border: 0 none;
    border-collapse:collapse;
}

.table-striped thead th
{
	background-color: white;
	cursor: pointer;
}

.big-table
{
	min-width: 1800px;
}

.small-table
{
	min-width: 540px;
}
</style>

<div id="popup" style="display: none;">
</div>
<div class="navbar-fixed-top">
<form action="export.php" method="post" name="export_excel">
<div class="input-group">
	<input type="text" name="domain" id="domain" class="form-control" placeholder="example.com"/>
	<span class="input-group-btn">
		<button type="button" class="btn btn-default" onclick="red" style="width:70px;height:34px;border:1px;background-color:#ff0000;opacity: 1;" >Slettet</button>
		<button type="button" class="btn btn-default" onclick="yellow" style="width:50px;height:34px;border:1px;background-color:#FFFF00;opacity: 1;" >Delt</button>
		<button type="button" class="btn btn-default" onclick="blue" style="width:70px;height:34px;border:1px;background-color:#1E90FF;opacity: 1;" >Flyttet</button>
		<button type="button" class="btn btn-default" onclick="green" style="width:60px;height:34px;border:1px;background-color:#3CB371;opacity: 1;" >Våres</button>		
		<button type="submit" id="export" name="export" class="btn btn-primary button-loading" data-loading-text="Laster...">Til CSV</button>
	</span>
</div>



<?php
if(!isset($_GET['field'])) $field = 'ID'; else $field = $_GET['field'];
if(!isset($_GET['sorting'])) $sort = 'ASC'; else $sort = $_GET['sorting'];

 
$sql = "SELECT * FROM server1 ORDER BY " .$field." ".$sort;

if($sort == 'ASC') $sort = 'DESC'; else $sort = 'ASC';
?>

<table id="sorting_table_small" class="table table-striped table-bordered table-hover small-table" style="display: none;">
	<colgroup>
		<col width="20%" />
		<col width="80%" />
	</colgroup>
	<thead>
		<tr>
			<th onclick="update(this, 'ID');"><font size="2">ID</font></th>
			<th onclick="update(this, 'Vsite');"><font size="2">Vsite</font></th>
		</tr>
	</thead>
</table>
<table id="sorting_table_big" class="table table-striped table-bordered table-hover big-table">
	<colgroup>
		<col width="2.3%" />
		<col width="15.8%" />
		<col width="12.1%" />
		<col width="11.9%" />
		<col width="9.7%" />
		<col width="7.3%" />
		<col width="14%" />
		<col width="2.3%" />
		<col width="2.3%" />
		<col width="2.3%" />
		<col width="4.8%" />
		<col width="4.2%" />
		<col width="3.9%" />
		<col width="2.4%" />
		<col width="4.6%" />
	</colgroup>
	<thead>
		<tr>
			<th onclick="update(this, 'ID');"><font size="2">ID</font></th>
			<th onclick="update(this, 'Vsite');"><font size="2">Vsite</font></th>
			<th onclick="update(this, 'Registrar');"><font size="2">Registrar</font></th>
			<th onclick="update(this, 'Eier');"><font size="2">Eier</font></th>
			<th onclick="update(this, 'NS');"><font size="2">NS</font></th>
			<th onclick="update(this, 'A');"><font size="2">A</font></th>
			<th onclick="update(this, 'MX');"><font size="2">MX</font></th>
			<th onclick="update(this, 'Flyttet');"><font size="2">Flyttet</font></th>
			<th onclick="update(this, 'Slettet');"><font size="2">Slettet</font></th>
			<th onclick="update(this, 'Delt');"><font size="2">Delt</font></th>
			<th onclick="update(this, 'Behkd');"><font size="2">Behkd</font></th>
			<th onclick="update(this, 'Varenr');"><font size="2">Varenr</font></th>
			<th onclick="update(this, 'Server');"><font size="2">Server</font></th>
			<th onclick="update(this, 'TXT');"><font size="2">TXT</font></th>
			<th onclick="update(this, 'Sistoppdatert');"><font size="2">Sist oppdatert</font></th>
		</tr>
	</thead>
</table>
</div>

<div id="container_domains">

<?php
// kobling til databasen
$mysqliconnection = mysqli_connect("localhost", "xxx", "xxx", "dom_oversikt") or die (mysqli_error());

//Tilkoblings characterset
mysqli_set_charset($mysqliconnection, "utf8");

//merke databasen
//mysqli_select_db("dom_oversikt") or die(mysqli_error());

//kjøring av quary
$rs = mysqli_query($mysqliconnection, $sql);


?>
<table id="sorting_data" class="table table-bordered table-hover table-striped">
	<colgroup>
		<col width="2.3%" />
		<col width="15.8%" />
		<col width="12.1%" />
		<col width="11.9%" />
		<col width="9.7%" />
		<col width="7.3%" />
		<col width="14%" />
		<col width="2.3%" />
		<col width="2.3%" />
		<col width="2.3%" />
		<col width="4.8%" />
		<col width="4.2%" />
		<col width="3.9%" />
		<col width="2.4%" />
		<col width="4.6%" />
	</colgroup>
	<tbody>
		<?php
		while($row = mysqli_fetch_array($rs))
		{
			$color = '';
			if ( ($row['Flyttet'] == "NEI") && ($row['Slettet'] == "JA") && ($row['Delt'] == "NEI") ) $color ='#ff0000';
			if ( (($row['Flyttet'] == "NEI") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "JA"))|| (($row['Flyttet'] == "JA") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "JA")) ) $color ='#FFFF00';
			if ( ($row['Flyttet'] == "JA") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "NEI") ) $color ='#1E90FF';
			if ( ($row['Flyttet'] == "NEI") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "NEI") ) $color ='#3CB371';
			?>
			<tr style="background-color: <?php echo $color; ?>">
				<?php
				foreach($row as $column => $value)
				{
					if (!is_numeric($column)) continue;
					?><td><font size="2"><?php echo utf8_encode($value); ?></font></td><?php
				}
				?>
			</tr>
			<?php
		}
		?>
	</tbody>
</table>
<?php
//stenge database koblingen
mysqli_close($mysqliconnection);
?>

</div>
</body>
</html>

Thanks
 
Last edited:
leifus

leifus

Glorious
Hyperion said:
If you weren't using bootstrap I would suggest handling the colors with CSS hovering.
Click to expand...

What i have been thinking is to try to sort it by the 3 columns i have in the database that is the values that makes the colors. As you might can see i not experianced with php or codeing in general so i don't know how to do it :p


Code: 
		while($row = mysqli_fetch_array($rs))
		{
			$color = '';
			if ( ($row['Flyttet'] == "NEI") && ($row['Slettet'] == "JA") && ($row['Delt'] == "NEI") ) $color ='#ff0000';
			if ( (($row['Flyttet'] == "NEI") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "JA"))|| (($row['Flyttet'] == "JA") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "JA")) ) $color ='#FFFF00';
			if ( ($row['Flyttet'] == "JA") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "NEI") ) $color ='#1E90FF';
			if ( ($row['Flyttet'] == "NEI") && ($row['Slettet'] == "NEI") && ($row['Delt'] == "NEI") ) $color ='#3CB371';
			?>
			<tr style="background-color: <?php echo $color; ?>">
				<?php
				foreach($row as $column => $value)
				{
					if (!is_numeric($column)) continue;
					?><td><font size="2"><?php echo utf8_encode($value); ?></font></td><?php		
				}
				
				if (isset($_POST["green"])) 
				{
					while($row = mysqli_fetch_array($rs1))
					{					
						foreach($row as $column => $value)
						{
							if (!is_numeric($column)) continue;
							?><td><font size="2"><?php echo utf8_encode($value); ?></font></td><?php		
						}
					}
				}
				?>
			</tr>
			<?php
		}
When i click on the buttons that are eather red,green,yellow or blue then my buttons just activate on the "To CSV" button i have. Even when i have diffrent "Type =" on them all.
 
Last edited:
You must log in or register to reply here.
Top