Sort Columns From Database?
Jul 24, 2009Need To Sort Colums From Database
View 1 RepliesNeed To Sort Colums From Database
View 1 RepliesFor example when row two is clicked I would like the table to reorder a, b, c, d
<table><tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
</tr><tr>
<td>b</td>
<td>a</td>
<td>d</td>
<td>c</td>
</tr><tr>
<td>z</td>
<td>x</td>
<td>y</td>
<td>w</td>
</tr></table>
I have a list of records from my database being displayed on this page. I want to be able to sort the columns. Typically, I do this with an HTML table, but was wondering if there is a way I can setup the below code using jQuery to allow for the column headers to be sortable? I have an icon to sort up and an icon to sort down.My goal is to allow the user to sort the data without a page refresh.
<div class="header">
<ul>
<li style="width: 20%;">Customer Number <img src="images/iconSort.gif" /></li>
[code]....
I'm fairly new to Tablesort, but got it working for the most part. The only problem I have is any columns that have a <a href></a> in them. It seems to sort it based on the url and not that actual data in the cell. How do I get it to sort based on the data and not the url?
View 11 Replies View RelatedThe code sortes/reverses the rows of a table with data upon the correspondent chosen column.
Uses DOM methods
Tested in IE6, NS7, Firefox, Moz 1.7, Opera 7.5 on XP
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sort_reverse table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
td {
background-color: #CCCCCC;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function sortIt(w){
r=document.getElementById('tab').rows;//the root
var oRows = new Array()//set the rows to be removed as an array of cloneNodes
var iRows = new Array()//set those rows' indexes as array
for(var i=1;i<r.length;i++){
oRows[i]=r[i].cloneNode(true);
iRows[i]=r[i].rowIndex;
}
q=w.parentNode.cellIndex;//set the column index of cells content
var oCol = new Array()//set the string content of column cells as array
var vCol = new Array()//set the "compare" array for a future sort/reverse
for(var i=0;i<iRows.length;i++){
oCol[i]=[r[i].cells[q].firstChild.nodeValue,iRows[i]];
vCol[i]=[r[i].cells[q].firstChild.nodeValue,iRows[i]];
}
oCol.shift();//remove the first element (the content of the cell in first row
vCol.shift();//do the same with "compare" array
oCol.sort();//sorts the content array
if(vCol.toString()==oCol.toString()){oCol.reverse()}//if the content was already sorted, reverse
for(var i=1;i<r.length;i++){
r[i].parentNode.replaceChild(oRows[oCol[i-1][1]],r[i])
}//writes the rows in a sorted/reversed order
}
</script>
</head>
<body>
<table id="tab" width="400" border="0" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
<td><a href="#" onclick="sortIt(this);return false">SORT/REVERSE</a></td>
</tr>
<tr>
<td>Banana</td>
<td>yellow</td>
<td>10</td>
</tr>
<tr>
<td>Apple</td>
<td>cyan</td>
<td>20</td>
</tr>
<tr>
<td>Cherry</td>
<td>blue</td>
<td>40</td>
</tr>
<tr>
<td>Drops</td>
<td>green</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
I use this function to add rows dynamically in a table code...
it does gets the value from each date column in the table and also calls the isDate() function but nothing after that...
I want to sort the database search results in php. Basically, the results are returned on a php page and need to be sorted either by columns. I managed to display the results on the page witht he code below and it works, but now i need to add the sorting bit, but i am stuck with it. I dont want to fetch the data from the database again but just to manipulate the existing entries. how can this be achieved in php?
View 5 Replies View RelatedI'm trying to implement is a table with editable rows and columns that will feed back into a database. If I could do it with AJAX that would be great too, but I'm not too familiar with javascript. I don't need the code, I need more of an idea. The HTML Table is currently a recreation of the MySQL table minus a few columns. Its all in text, but if I could make the text editable, or better yet, make the text turn into input boxes it would be really cool. I'm not really sure what kind of methods and properties I would need, or quite how to put it all together. What do you think is the best way to go about the entire project?
View 8 Replies View RelatedWhen a thead contain less columns than real columns in the tbody section, the Tablesorter plugin produces a variable not found error in jquery coreTo reproduce simply do not put all <th> in thead that correspond to columns in tbody.
View 1 Replies View RelatedOK so Ive been using jquery for a little bit now and love it. I am a ColdFusion developer. I have a need where I would like to present the user with a list of categories and the user can drag and drop to sort, but then I need to post this new sort order to the database. So I see there are a ton of cool drag & drop plugins for jquery. I understand how they work and I can get it to work as far as spitting out DIVS or spitting out ULs that can be sorted, but then what? So now they are sorted on my screen and not really part of the form. How do I translate that into something I can do a post to the database with? Do I do an AJAX call every time they drop an item and try to extrapolate the sort order on that item after they drop it? Do I populate a hidden form field with the constantly updating sort order list? MAybe a list of ID's? How does everyone else go about this this task? I'm sure there is more than one way and I'm sure this is a common task.
View 1 Replies View RelatedCan i use single jquery and html to do some database manipulation i.e. database transaction.
View 1 Replies View RelatedI want to be able to grab words from a database with javascript. How do I do that?
View 2 Replies View RelatedI have been searching how to connect to a database and execute some queries, and then use the data that I get to populate some tables in a web page, all this using javascript.
I am confused because I have seen in some webpages that javascript is not designed to connect with databases, and also I have see other pages where they say that it is possible.
Does anyone know if it is possible to use javascript to connect to a database (informix), and execute some procedures or queries?
I am having no luck with my post form to mysql. It is only posting the first letter of the word/phrase for the text input fields to the mysql database. It is a photo and text post form. The photo and only first letter of text are posting to database. I am using Jqtouch, jquery, and phonegap.
Here is my form fields:
Here is my java script:
I am attempting to create an Access database connection from within an HTML page. I am using Javascript to make the connection and then test a basic UPDATE statement.
The following code is throwing back an error 'UPDATE statment syntax incorrect'
Code:
I thought the syntax was correct, but maybe it is something else?
This looks as it should except that it needs more spacing between the columns. How would I do that?
<script type="text/javascript">
/* <![CDATA[ */
var numRows = "10";
[code]....
I am new to javascript. I am trying to create a drop box on a php form that gets its information from a mysql table. I want it to show two columns from the same table. Can someone give me an example of this or point me in the right direction?
View 1 Replies View RelatedI have a requirement to build a div in a page that contains a table of
plane details, and one of the columns (on the left - tail number)
needs to be sticky on the horizontal axis but not on the vertical axis
(i.e. when scrolling right the tail numbers need to stay visible on
the left hand side, but when scrolling down the tail numbers need to
scroll to keep up with the rest of the plane details).
I have been looking at various ways of doing this but currently to no
avail, the idea that looks most promising is to split it into two
tables and set them both to have scroll bars, the problem with this
idea was that both the tables need to be scrolled by the same amount
vertically, i could get the position of one table using the offsetTop
property but could not find a way of setting the offsetTop property
for the other table so they stay aligned. The other issue with this is
that it would be using the onscroll property which does not seem to
show any distinction between horizontal and vertical scrolls..
If I have this array
Code:
testarray = [
["1", "test1", "test11"],
["3", "test3", "test33"],
["5", "test5", "test55"],
["2", "test2", "test22"]
];
How do I access the 2nd column of the 2nd row?
I tried:
Code:
alert(testarray[1][1]);
But it says undefined.
I have some 10columns in a table….
First 5columns are viewed on load of the screen….
The fifth column has just >> buttons like this…..
On click of arrow buttons I should view the fifth column (>>) and the remaining 5columns….
But the fist 4 columns should be hidden…. That means the table should move like marquee tag…… The header part and footer part should not change
Firstly, please understand that this is a very big web application. There is a "tabbed" interface that allows one to switch from page to page... On each page, there are tables.
Each table has a "minimize/maximize" function that will resize the table and hide/unhide specific columns in the table...
Right now, the tables are constructed as HTML tables. The TD's that are to be hidden are given the class "hidden[tableName]" whatever the table name may be.
When the table is maximized, i execute the following function:
function changeVisibleByClass(element, className, display){
var allPageTags = new Array();
allPageTags=document.getElementsByTagName(element);
for (i=0; i<allPageTags.length; i++) {
if (allPageTags[i].className==className){
allPageTags[i].style.display=display;
}}}
This has gotten to be quite inefficient and slow because it loads all of the visible TDs in the HTML and then checks each one for its classtype, changing the visibility as necessary. This works fine for a small page, but as my tables grow, this is becoming horribly inefficient.
So I'm trying to get 3 DIVs to line up as columns horizontally.I've got it to work in some browsers but not all.It's supposed to look like However in some browsers it looks like The code I'm using (Stripped of all the crap) is
<div id="product_col1">
<!--Contents of column 1-->
</div>
[code]....
I have a material table wich contains the article number, a quantity input field, a max quantity field... How can i test that the input quantity is less than the max quant one ?
Here is a sample code :
I want to hide columns with all green cells and I stored the column # that I want to hide into an array, errorColumn(). I am able to hide the rows I want, but I can't seem to figure out the columns.
I think the .has function is the problem because when I use the if(j!=5), it'll hide all columns but the 5th one. I just need it to do that for every column in my array...
Code:
I need to be able to create a 2 column table and then based on which column
header is clicked on, sort the list by that column so that each table row is
sorted properly. If possible there might be more than one line in the row
and I would only want to sort on the first line in a given row. Can this be
done using JavaScript. If so, which entities do I need (A table? A form?)
I was making a menu with 2 columns, I need this menu for my work, I tried to do it with jquery, it worked, but is a little bug in this menu: When I click over to the left, the table disappears, and when I clickgets right to the table with a large space.
Objective: Make a menu with 2 columns, which when you press the left button, the menu go to the left showing more objects, and the same right, and Circulate.There is my code:
[Code]...