I Have a problem when I try to sort my table with tablesorter.js. It looks easy to use it, but in my case it doesn't work...
First of all, I explain my application:
1.- I have a database with several data
2.- I developed a web interface to search that data (HTML)
3.- I wanted to make interactive communication with the database, so I used AJAX
4.- I build the querys and the table with the results in another php file
So, in my HTML file:
<div id = "DivResults"></div>
And in the header of this file I added the jquery and tablesorter.js references and to my CSS file the contento of the CSS from tablesorter
$(document).ready(function() { $("#myTable").tablesorter(); } );
Now, in the php file I have the following code:
<table id="myTable" class="tablesorter" style="font-size: 8pt; position:relative; top: -10px;" >
<thead>
<tr>
<th><b>Col1</b></th>
<th><b>Col2</b></th>
<th><b>Col3</b></th>
<th><b>Col4</b></th>
<th><b>Col5</b></th>
</tr>
</thead>
<tbody>
<?php
for ($i = 0; $i<$n;$i++)
{
$Result_array = ordenar_array($Result_array,2, SORT_ASC,3,SORT_ASC);
echo "<tr>";
for ($aux = 0; $aux<5;$aux++)
{
echo "<td> ".$Result_array [$i][$aux]."</td>";
}
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
?>
The table it's ok, the data are also ok and I display it in the correct way, but can't sort it with this function. Could anyone help me?
EDIT: this is the code that I added to my CSS file:
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(../img/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(../img/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(../img/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
Related
The red and yellow standard colors of xdebug can hurt your eyes after a few hours.
http://www.designified.com/blog/article/76/restyling-xdebug-output describes how to replace the style with javascript requiring jquery.
I was looking for a more straight forward way and finally found one.
The solution is the !important tag, it overrides the existing style values. Use the following css code to avoid eye cancer when using xdebug:
.xdebug-error {
font-size: 12px !important;
width: 95% !important;
margin: 0 auto 10px auto !important;
border-color: #666 !important;
background: #ddd !important;
}
.xdebug-error th, .xdebug-error td {
padding: 2px !important;
}
.xdebug-error th {
background: #ccc !important;
}
.xdebug-error span {
display: none !important;
}
.xdebug-error_description th {
font-size: 1.2em !important;
padding: 20px 4px 20px 100px !important;
background: #ccc no-repeat left top !important;
}
.xdebug-error_callStack th {
background: #666 !important;
color: #ddd !important;
}
Have a nice xdebug!
Yes you can. Try this css below.
table.xdebug-error {
width: auto;
background: white;
border: none;
border-spacing: none;
border-collapse: collapse;
box-shadow: 0px 3px 10px 0px black;
position: fixed;
top: 0px;
right: 0px;
z-index: 8888;
font: 14px verdana;
transform-origin: top right;
transform: scaleX(0.4);
opacity: 0.3;
transition: all 200ms ease;
}
table.xdebug-error caption,
table.xdebug-error th,
table.xdebug-error td {
text-align: left;
vertical-align: middle;
}
table.xdebug-error a img {
border: 0;
}
table.xdebug-error :focus {
outline: 0;
}
table.xdebug-error pre {
margin: 0;
}
table.xdebug-error tbody tr td,
table.xdebug-error tbody tr th {
border: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
font-weight: normal;
}
table.xdebug-error tbody tr td {
padding: 3px !important;
vertical-align: top;
}
table.xdebug-error tbody tr th {
padding: 13px !important;
}
table.xdebug-error tbody tr td:nth-of-type(1) {
width: 5% !important;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] {
font-weight: normal;
background: steelblue;
color: white;
}
table.xdebug-error tbody tr th[bgcolor='#f57900'] span {
display: none;
}
table.xdebug-error tbody tr font[color='#00bb00'] {
color: #005e00;
}
table.xdebug-error tbody tr td small {
display: none;
}
table.xdebug-error tbody tr td i {
padding-left: 12px;
}
table.xdebug-error:hover {
transform: none;
opacity: 1;
}
CONS:
Depending on your other css defs, you may have to fiddle a bit until it looks as promised.
It's not as beautiful as a Laravel/Symfony error
PROS:
You can see the actual page, despite the error. (Message will be dimmed and pushed on the right side, appearing on mouse hover.)
It's nothing more than CSS
You can even add it to your page via CSS Live Editor Plugin or something similar; therefore, no need to add to your own code
It won't break your styling, won't stuff a whole lot of text into a tiny container where the error happened, etc. - because it's position:fixed.
Pleasant to the eye - you'll end up throwing errors just to see it again :)
Another option is to disable xdebug from overloading var_dump.
In the php.ini [XDebug] section add xdebug.overload_var_dump=0
Formatting the output is then up to you; one such way could be wrapping var_dump in your own debug function that prints <pre> tags.
// notice the line height, the padding(cellspacing), monospace font, font size, making readability better at least for me.
//
// A FILENAME : xdebug_stack_trace.css
//
// This is how the xdebug_stack_trace.css is called from the index.php page
//
// <style><?php require_once("./resources/css/xdebug_stack_trace.css");?></ style>
//
// notice that on the line above there is a space between the slash
// and the 'style', on the ending 'style' tag, otherwise the display
// get all messed up when this page gets loaded.
//
// make sure that when you copy the 'style' line from here to the
// index page, that you remove the extra space at the ending 'style'
// tag of the index page.
// +---------+---------+---------+---------+---------+---------+---------+
// orange/black td header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error th
{
font-family:monospace;
font-weight:normal;
font-size:15px;
padding: 6px 6px 6px 6px;
border:1px solid black;
background: #FFCC99; // orange
color:#000000; // black
}
// +---------+---------+---------+---------+---------+---------+---------+
// black/white th header line
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error > tr:first-child > th:first-child,
.xdebug-error > tbody > tr:first-child > th:first-child
{
line-height:1.6em;
padding: 10px 10px 10px 10px;
border:1px solid #000000;
background: #000000; // black
color:#FFFFFF;
}
// +---------+---------+---------+---------+---------+---------+---------+
// green/black td content one or more lines
// +---------+---------+---------+---------+---------+---------+---------+
.xdebug-error td
{
font-size:14px;
padding: 6px 6px 6px 6px;
border:1px solid green;
background: #D1FFE8; // light green
}
// +---------+---------+---------+---------+---------+---------+---------+
Ok. Here is my problem. Regardless when i do my while loop to get my list elements out to the page, my images wont center. I have tried using divs and classes but nope. I have tried closing the tags and using html and opening the PHP tags but no. Here is the code. Help plz.
<?php
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
$name = $row['name'];
$desc = $row['longDesc'];
$cost = $row['cost'];
$qty = $row['quantity'];
$img = $row['imageFilename'];
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
}
?>
Here is the css:
ul#items li{
color: white;
padding: 10px;
display: block;
font-family: 'Alef';
height: 180px;
text-align: center;
width: 150px;
vertical-align: middle;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
display: inline-block;
margin: 10px;
}
ul#items li:hover{
border: 1px solid #8E8E8E;
}
ul#items img{
margin-top: 15px;
display: block;
position: absolute;
border: 1px solid black;
max-width:149px;
height: 118px;
width: fit-content;
}
Help please.
IMAGE OF PROBLEM:
http://i.stack.imgur.com/arzL0.png
echo "<a href='paintings.php?id=$id'><li><img src='../../_/images/paintings/$img'><center><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
You're not center'ing the 'img' tag in your code. Try this instead:
echo "<a href='paintings.php?id=$id'><li><center><img src='../../_/images/paintings/$img'><div id='name'>$name</div><div id=cost>Cost: <b>£$cost</b></div><div id='qty'>Quantity: <b>$qty</b></div></center></li></a>";
There are many places where your HTML could/should be improved. A lot of it depends on context we don't have, which is understandable, but doesn't make it easy to give you a complete answer.
To make it work and still look like your screenshot, I would first:
Move the anchor tags into the list item
Remove any IDs that are within loops that do not change per loop iteration. An id is a unique identifier. This doesn't have anything to do with your question, but is important.
Then refer to this (INCOMPLETE) fiddle to get started:http://jsfiddle.net/aNgcb/
The css might look something like this:
ul#items {
list-style-type:none;
overflow:hidden;
}
ul#items li {
color: white;
padding: 10px;
font-family:'Alef';
height: 180px;
text-align: center;
width: 150px;
background:url('../images/nav/navBg.jpg');
border: 1px solid #191919;
float: left;
margin: 10px;
}
ul#items li:hover {
border: 1px solid #8E8E8E;
}
ul#items img {
border: 1px solid black;
height: 118px;
max-width: 100%;
}
You can't center a "block" element with text-align: center;
You can try making the img display: inline-block; or just leave them at the default inline.
display: inline-block;
There is no problem in the php, the problem its with css. try putting a div there and make it margin-left: auto and margin-right:auto.
If you want a good answer, try posting a jsfiddle example. www.jsfiddle.com
I have the code below in a site but can't get to center everything within the main div (rightBarItems):
<div class="rightBarItems">
<?php
echo "<div class='similarTitle'>YOU MAY ALSO LIKE</div>";
while ($row3 = $result3->fetch())
{
echo "<div class='similarItems'>";
echo "<a href='items_descr.php?itemId=".$row3[id_item]."'><img class='similarImage' src='images/{$row3[thumb1]}.jpg'></img>";
echo "<div class='similarItemsText'>".$row3[name]."</div></div>";
}
?>
Then, here is my css:
.similarTitle {
font-family:"Century Gothic","Trebuchet MS",Helvetica,Arial,sans-serif;
font-size:15px;
text-transform:uppercase;
color:#3E3E3E;
}
.rightBarItems
{
margin: 0 auto;
width: 168px;
background: #F3EFE2;
padding: 10px;
float: right;
text-align: center;
height: 300px;
}
.similarItems {
float: left;
text-align:center;
margin: 0 auto;
padding: 5px;
}
.similarItemsText {
padding-right: 11px;
margin: 0 auto;
font-family: verdana,Helvetica,Arial,sans-serif;
font-size: 11px;
color: #666;
}
#similarImage {
margin: 0 auto;
border: 1px solid gray;
float: left;
}
Not everything gets centered... Any help? Thanks!!
* Adding some extra CSS I had forgot to put
Use:
text-align:center;
For all of these CSS classes: rightBarItems, similarTitle, similarItemsText, similarImage.
Try This in CSS
.rightBarItems{ text-align:center ; }
or
.rightBarItems > div { margin-left:auto ; margin-right:auto; }
Remove the float:right style from the rightBarItems div.
Well, firstly, you have different padding values for each class so that will first prevent them from aligning.
If you are ok with leaving a paragraph space between the texts then align=center should work with the paragraph tag instead of fixing the whole CSS code.
<p align="center"> Centered Text </p>
I am currently writing an addon module for our Billing Software, and the modules automatically inherit the template's CSS when you use any of the elements. For example, I use the "datatable" element for my tables, and it inherits the CSS style depending upon what template the user is currently using.
I want to hide the inner border that the "datatable" element has, and I am using tags to put all of my CSS in the module code. I am not quite sure how I can do this, but here is what the CSS looks like from the billing software's template style.css file.
table.form {
border: 1px solid #B8CBE7;
background-color: #fff;
padding: 0px;
}
table.form td.fieldlabel {
text-align: right;
font-weight: bold;
padding: 5px;
background-color: #E4ECF8;
}
table.form td.fieldarea {
text-align: left;
padding: 5px;
border-bottom: 1px dashed #ccc;
}
.tablebg {
background-color: #e9e9e9;
}
table.datatable {
padding: 0;
margin: 0;
}
table.datatable th {
background-color: #f3f3f3;
font-weight: bold;
text-align: center;
}
table.datatable td {
background-color: #fff;
text-align: center;
}
table.datatable tr.rowhighlight td {
background-color: #EFF2F9;
}
table.datatable tr:hover td {
background-color: #EFF2F9;
}
You can define the same datatable class again and set it's border as 0. You will just need to ensure this new css definition comes after the actual one
table.datatable {
border: 0px;
}
try append this line in CSS stylesheet:
.datatable{
border: 0 !important;
}
I need to create a jQuery datatable, in which some rows might have gray background color - meaning that they are disactivated. A row can have gray background only if the column 'status' of the corresponding MySQL table is equal to 0.
Look at the below code. Column '10' is hidden. It contains status value. If it is 0, then the row should have different background color. But this does not work. No error message. Any ideas?
$(document).ready(function(){
$('#newspaper-b').dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[4, "asc"]],
"aoColumns": [null,null,null,null,null,null,null,null,null,null,
{"bSearchable": true, "bVisible": false},null,null],
"bJQueryUI":true,
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if(aData[10]=="0"){
nRow.className = "disactivatedRow";
}
return nRow;
}
});
CSS
.disactivatedRow td {
background-color:#ffbba9 !important;
color: #e6e6fa;
}
#newspaper-b {
border-collapse: collapse;
border-color: #B7DDF2;
border-style: solid;
border-width: 1px;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
margin: 0;
text-align: left;
width: 480px;
}
#newspaper-b th {
background: none repeat scroll 0 0 #EBF4FB;
border-color: lightgray;
font-size: 11px;
font-weight: bold;
padding: 15px 10px 10px;
}
#newspaper-b tbody tr td {
background: none repeat scroll 0 0 #FFFFFF;
}
#newspaper-b td {
border-top: 1px dashed #FFFFFF;
color: #000000;
padding: 10px;
}
#newspaper-b tbody tr:hover td {
background: none repeat scroll 0 0 #FFCF8B;
color: #000000;
}
#newspaper-b tbody tr.selected td {
background: none repeat scroll 0 0 #FFCF8B;
color: #000000;
}
Row doesn't have content hence background, td should be colored instead:
.disactivatedRow td {
background-color:#ffbba9 !important;
color: #e6e6fa;
}
If still doesn't solve I'd suggest you to console.log(aData[10]) outside of your if. For console.log to work use Chrome/Firefox, find console output via F12 and see what aData[10] contains, maybe you need aData[9] (programmers use to count from zero ;).