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>
For 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'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?
The 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>
When 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.
OK 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.
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:
I'm looking for some super light-weight technique to take an existing table and just be able to resize the column headers. I've seen several jquery table plugins out there that seem to do everything imaginable, but I don't really need any of the fancy bells and whistles. I want to use my existing table structure and styles.
I have a link to append a new table with the same fields. What I would like to do is when I click on "Append new table" link, I would like to convert all the existing fields in the table in a single row instead of displaying them by columns. Can somebody give me some inputs on how I could go about implementing it
I've implemented tablesorter in my page using links to do the sorting rather than table headers. The reason being that the visible columns have the data in such a way that sorting on them is non-intuitive (the first column has both a job title and department title, so how to specify to sort on one or the other? I created hidden columns one for each data element and hid them).This works beautifully in Firefox and webkit browsers, but IE 7 and 8 are returning the following error when trying to sort on a hidden column that isn't the last column in the table. If I display a column, the sorting works fine on it, but hidden and not last, it errors. Changing the order of the hidden columns doesn't change the behavior, last column works and the other three error.Line: 552Error: 'undefined' is null or not an object.the line is referring to jquery.tablesorter.js here:
function setHeadersCss(table, $headers, list, css) { // remove all header information
I am using aloop to create DIVs dyncamically on my HTML page. This adds DIVs one below the other. Was wondering if I can add the DIVs in two columns with 2 items per row using the loop.
How to I bind a click function to specific columns of a table row?
Btw, this is a (yet not answered) crosspost of [URL]
I currently have this piece of code:
$('#example tr').click( function() { // selection stuff here, $(this) is the row });
However, this binds the whole row. As there are checkboxes in the row, I don't want to have the cells containing them bound, too. But, there is a problem: I need to know what row has been clicked on / to what row the cell belongs to. I simply don't get it to work, I tried something like this:
I have the code below, when I put it directly in the html, I am able to drag and drop into it.When I try to add it dynamically, and I look in Firebug, the added column is identical with what I added manually in the html, yet, it will not allow me to drag and drop into it.
I've got a website that displays all my products together within a table and the user can then click on the product they want to buy or obtain more info on. This is always displayed in four columns.
However if you have a few pages of products for one category it can be displayed across a few pages. For some reason the content management system I use will display only 1, 2 or columns on the last page if there are less than 4 products on the last page. When this happens you can get the produts displayed with a different width to what I've set within the CSS because the table's with is set to 100%.
When this happens is it possible to set the the width of the table to:
75% if there are 3 columns
50% if there are 2 columns
25% if there is only one column
Or is it possible to keep the width of the table at 100% and just add the extra columns if there are not 4?
The table id="catprods_tbl" and the columns (td) are is set to id="column_main"
I have included the example of the layout when there are only two columns on the last page.
I'm using the tablesorter plugin and having a heck of a time creating a parser to sort a column of images. One of my columns can have one of three images whose HTML code is below:
Now using the example of custom parsers from tablesorter's website, I attempted to create my own parser as seen below:
<script type="text/javascript" id="js"> // add parser through the tablesorter addParser method $.rides.addParser({ // set a unique id
[Code]....
However this code does not work. Every other column is sortable so I know the script itself is working but the column with the images refuses to sort. I also tried using regex to change the images into a sortable number for the script to use but that did not seem to work either.
Ive attached a screen shot of the type of layout I have. I have two columns, the left column is straight forward single div, but the right may have up to three divs inside of it (there is an outer div called right-col which I forgot to shade in which wraps around div box1 and 2), and I would like the last div to extend so it is the same size as the div on the left (similarly, if the content on the right was longer then the left, then I would want the left div to expand). Ive attached a screenshot of what I mean. There are loads of plugins, that show you how to make two/three columns equal heights, but I have not found anything to show me how to make two columns in a div equal height to another whole column - hope that makes sense.
I'm trying to validade a table that has 20 checkboxes (5 columns and 4 rows) and that needs to have at least 2 checkboxes checked in each row and column.I've managed to create the validation for the row part (all checkboxes in the same row have the same name).I've also created a custom class rule (all checkboxes in the same column have the same class) but it doesn't seem to work. It only shows the row validation messages (labels that are display next to the last cell in each row) and not the column rule message.
I am using the columnize plugin v1.4 and jquery v1.3.2. My css for the column div, etc is as follows: /*columnize code*/ #middlePeopleSection {float:left;width:585px;height:460px;max-height:300px;padding:0;margin:0;background:yellow;} #columnSection{float:left;width:580px;height:460px;margin-right:1em;background:#990000;} .column{margin-right:1em;} .first,.last{clear:both;} p.people {text-align:left;font-family:"Times New Roman",times,serif;padding:0;margin:0;margin-bottom:20px} The link to my test file is [URL]. My objective is to have TWO columns of equal width. I want the first column to be full width with everything that doesn't fit into the first column flowing into the second column.
Strange behaviour of Flexgrids' Show/Hide Columns functionality when running on IE8. The 'down arrow' icon is displayed in the next columns header more and more so as you move across the grid from left to right.
