We Keep Coding

Tablesorter issues when used with dragtable plugin.

I'm using tablesorter plugin for column sorting and dragtable plugin for rearranging the column order. Also, I'll update the table content using ajax on some button clicks.
So the problem here is, when I rearrange the column order using drag and drop and then update the using ajax, the column sorting is not updated according to the column order. That is, when we click on say Column1, the sorting is done based on data in Column2.
I'm using this piece of code for ajax update.
jQuery("#Table").trigger('updateRows');
I have also tried updating with
jQuery("#emailListTable").trigger('updateAll');
In this case, column drag and drop stopped working.
Any other way to tell tablesorter plugin that column order is changed?
Plugin details:
TableSorter : http://tablesorter.com/docs/
Dragtable : http://akottr.github.io/dragtable/

Update: version 2.19.0 has been released. It includes a modified version of the dragtable widget - see the demo here.
The updateRows and updateAll methods are not available in the original tablesorter plugin, but are part of my fork of tablesorter.
In order to get the dragtable widget to work with the fork of tablesorter, you'll need to trigger an updateAll event from within the dragtable persistState callback function. Try out this demo - I had to add some extra HTML & CSS to add a dragable handle so the demo is working 100% (I hope).
CSS
.table-handle {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAIAAAANAQMAAAC5Li2yAAAABlBMVEXd3d2ZmZl1DvVeAAAADklEQVQI12MAAQcsmAEAEFoBQSzdkZ8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
height: 18px;
margin: 0 1px;
cursor: move;
}
HTML (single header cell example)
<th>
<div class="table-handle"></div>
<div class="sort">Header</div>
</th>
Script
$(function () {
var $table = $('table')
.dragtable({
dragHandle: '.handle',
persistState: function (table) {
// remove div wrapper, or swapped header
// contents will be replaced
$table.find('thead .tablesorter-header-inner').contents().unwrap();
$table.trigger('updateAll', false);
}
})
.tablesorter({
theme: 'blue',
selectorSort: '.sort',
widthFixed: true
});
});
Make sure to also include jQuery UI (jQuery UI css is optional) because it is a dependency of the dragtable widget.

Handsontable scroll issue with non default row height

I have a problem: handsontable scroll is jumping when row height is non-standard.
My code is:
$(document).ready(function () {
function createBigData() {
var rows = []
, i
, j;
for (i = 0; i < 10; i++) {
var row = [];
for (j = 0; j < 7; j++) {
row.push(Handsontable.helper.spreadsheetColumnLabel(j) + i + "\n2nd_row");
}
rows.push(row);
}
return rows;
}
$('#example1').handsontable({
data: createBigData(),
});
});
jsfiddle: http://jsfiddle.net/LR4Ne/
Try to scroll to the bottom of the table. Do you see it jumping back and forth?
I've noticed that old version of handsontable js didn't work that way, try to change
<script src="http://handsontable.com/dist/jquery.handsontable.full.js"></script>
to
<script src="http://old.handsontable.com/dist/jquery.handsontable.full.js"></script>
It works as it should now.
Please advise.
Thanks in advance!
--
Dmitry

I'm entirely sure what the issue with the new handsontable version is, but the problem is occuring because of the \n newline your entering into each cell. Handsontable has a method for entering markup into cells, which I've used in this fiddle, however the problem still exits. If you remove the \n and add more rows, it works fine. (Side note: I'm using a <br> here, because I think symantically, that makes more sense, but it doesn't matter which you use.) You will notice in this example, you can scroll, but once you get to the bottom, it starts getting jumpy again. Which led me to:
To fix the issue you can define the minimum height for the .wtHider class used by the plugin. Here is a working fiddle which shows how to fix the issue.
The main problem here is that when you scroll, handsontable is actually re-rendering the table, with the newly viewable rows. Upon re-render, handsontable is dynamically setting the height of the .wtHider and .wtHolder, which is what is causing the issue.
This is a "hacky" solution, but it should probably work for your needs. Hope this helps.
Per request, here's another fiddle with fixes the space issue at the bottom of the table: http://jsfiddle.net/8awo0gzk/1/

Select text in a column of an html table

Is it possible to select the text (i.e. have it highlighted so that it can be copy+pasted) of every cell in one vertical column of an HTML table.
Is there a JavaScript method, or perhaps an equivalent in some browsers to the Alt-Click-Drag shortcut used in many text editors?
Or is this impossible?

What you're looking for is called Range object (TextRange in IE).
Update:
Here's a working code to do what you're suggesting: http://jsfiddle.net/4BwGG/3/
While capturing cell contents, you can format them in any manner you wish. I'm simply appending a new line every time.
Note:
Works fine in FF 3 and above
IE (before 9) and Chrome do not support multiple selection.
Chrome doesn't highlight all cells (but captures all content). Same goes for IE9
IE 7 & 8 will throw an error.
An alternative is apply a CSS style that simulates highlighting on click of column header and loop through all cells to capture their content. Look and feel of this approach may differ from native selection's look (unless you somehow capture select event and alter the appearnce).
Then use jQuery copy plugin to copy them to clipboard.

Some code review tools implement this to allow copying & pasting code from one side of a side-by-side diff. I looked into how ReviewBoard pulls it off.
The gist is:
When a column selection begins, style the cells in all other columns with user-select: none (and its prefixed variants, if necessary). This creates the appearance of a column selection. The other columns are still secretly selected, so you have to...
Intercept the copy event and change its payload to reflect the contents of the selected column.
The ReviewBoard code to do this consists of this CSS and this JavaScript.
I pulled it out into a fairly minimal jsbin demo.
Here's the CSS to create the appearance of a single-column selection (you add the selecting-left class to the table when the left column is being selected, or selecting-right for the right):
.selecting-left td.right,
.selecting-left td.right *,
.selecting-right td.left,
.selecting-right td.left *,
user-select: none;
}
.selecting-left td.right::selection,
.selecting-left td.right *::selection,
.selecting-right td.left::selection,
.selecting-right td.left *::selection,
background: transparent;
}
Here's the JavaScript to intercept the copy event and plug in a single column's worth of data:
tableEl.addEventListener('copy', function(e) {
var clipboardData = e.clipboardData;
var text = getSelectedText();
clipboardData.setData('text', text);
e.preventDefault();
});
function getSelectedText() {
var sel = window.getSelection(),
range = sel.getRangeAt(0),
doc = range.cloneContents(),
nodes = doc.querySelectorAll('tr'),
text = '';
var idx = selectedColumnIdx; // 0 for left, 1 for right
if (nodes.length === 0) {
text = doc.textContent;
} else {
[].forEach.call(nodes, function(tr, i) {
var td = tr.cells[tr.cells.length == 1 ? 0 : idx];
text += (i ? '\n' : '') + td.textContent;
});
}
return text;
}
There's also some less interesting code to add the selecting-left and selecting-right classes at the start of a selection. This would require a bit more work to generalize to n-column tables.
This seems to work well in practice, but it's surprising how hard it is!

Here is a hack that doesn't involve javascript at all:
Step 1: open the inspector
For Chrome on mac, press command + option + J.
Step 2: select a random cell using the selector tool
For Chrome on mac, click the selector icon on the top left corner of the inspector to enter the selector mode.
Then click a random cell in the table.
Step 3: hide all cells by editing CSS
Click the New Style Rule button (see image below)
then enter this rule (you may want to modify it a little bit depending on your HTML)
tr td {
display: none; # hide all cells
}
Now all cells should have disappeared.
Step 4: display only the column that you want by editing CSS
Go ahead and add another rule above that one:
tr td:nth-child(2) { # replace 2 with the index of the column you want to copy. 2 means the second column
display: table-cell; # display that column
}
Now the column you want to copy from should have reappeared.
All the other columns should be invisible and can't be selected.
Step 5: just copy that column!
Note
You can restore the page by refreshing.
I find this work perfectly if you just want to select one column or two.

You could have a div which gets populated with the column data on click and apply a css class to give the columns the appearence of being selected
something like this:
var $mytable = $("#mytable"),
$copydiv = $("#copy_div");
$mytable.find("td").click(function(){
//get the column index
var $this = $(this),
index = $this.parent().children().index($this);
//find all cells in the same column
$mytable.find("tr:nth-child(" + index + ")").removeClass("selected").each(function () {
var $this = $(this);
$this.addClass("selected");
$copydiv.html($this.html() + "<br />");
});
});
or you could have a separate table for each column, but I don't think that would be worth it.

WIP: CSS only solution using :has() selector
The new :has() selector gave me hope in solving this issue without JS. The idea was to disable text selection for all cells, and only activate it for cells of a column that is hovered.
So you would have rule like this:
table:has(tr td:nth-child(1):hover) tr td:nth-child(1) {
-webkit-user-select: auto;
user-select: auto;
}
A complete sample can be found here: https://codepen.io/catlan/pen/XWELegW
This is work in progress, because in the current version of Safari (15.6.1), the display of the text range disappears after the selection is done, only to reappear after moving the cursor for a few pixel. See https://bugs.webkit.org/show_bug.cgi?id=244445
It seems to work fine in Chrome starting with Version 105.

How to set a value of a known cell in IE7?

I have a report that has some headers on the top of the table(columns) but also some headers on the left of the table (rows). Those headers are variable, never fixed. The whole entire table is built through DOM Scripting based on an Ajax response that returns me the top headers, the left headers, and the qty at a particular intersection.
I already have an algorithm that knows how populate the cells in that table based on the column header and the row header.
In Firefox, Chrome, and Safari the following works:
document.getElementById("myTable").rows[row].cells[column].firstChild.nodeValue = item.qty.toString();
The problem is in IE7 (what the client uses). IE 7 does not let me access a particular cell by using the [index] notation.Basically, its blowing up at ".cells[column]" . Do you guys know the equivalent of the statement above in IE7?
Also do you know of a jQuery way to fill a known cell once I have the row and the column coordinates?
Thanks,
-Dario

jQuery("#myTable tbody tr:eq(" + row + ") td:eq(" + column + ")").html("foo");
jQuery selector #id
jQuery selector element
jQuery selector eq()
jQuery html()

row and column will start from 0. Use the above codes.

Non-jquery way:
document.getElementById("myTable").getElementsByTagName('tbody')[0].getElementsByTagName('tr')[row].getElementsByTagName('td')[column].innerHTML = item.qty.toString();

$("#myTable tr:eq(" + row + ") td:eq(" + column + ")").html(item.qty.toString());
However you should be aware of nested tables. Especially if you have another table inside the table with the myTable id. If so let me know, i might rewrite the line for you.
Also you should be aware that I was using jQuery here. To add jQuery to your page you should add the following to the page, preferably in the <head> element:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
This if you want to make use of the jQuery file hosted by google, but of course you can download it and host it yourself if you wish so.

Try this:
$("#myTable tr:eq(" + row + ") td:eq(" + columnh + ")").html(item.qty.toString());

jqGrid GridUnload/ GridDestroy

When I use $('#mygrid').jqGrid('GridUnload'); my grid is destroyed: no pager/ no header.
In a wiki I found:
The only difference to previous method is that the grid is destroyed, but the
table element and pager (if any) are left ready to be used again.
I can't find any difference between GridUnload/ GridDestroy or do I something wrong?
I use jqGrid 3.8.

To be able to create jqGrid on the page you have to insert an empty <table> element on the place of the page where you want see the grid. The simplest example of the table element is <table id="mygrid"></table>.
The empty <table> element itself will be not seen on the page till you call $('#mygrid').jqGrid({...}) and the grid elements like column headers will be created.
The method GridDestroy works like jQuery.remove. It deletes all elements which belong to the grid inclusve the <table> element.
The method GridUnload on the other hand delete all, but the empty <table> element stay on the page. So you are able to create new grid on the same place. The method GridUnload is very usefull if you need create on one place different grids depend on different conditions. Look at the old answer with the demo. The demo shows how two different grids can by dynamically created on the same place. If you would be just replace GridUnload in the code to GridDestroy the demo will be not work: after destroying of the first grid no other grids will be created on the same place.

In addition to Oleg's answer I would like to point out that GridUnload does a little more that just remove the grid from the table. It removes the original HTML table element(and the pager), and ads an identical one in its place(at least in 4.5.4 it does).
This means that if you attached some event handlers to the table HTML element(i.e with jquery on, like ('#gridID').on('event','selector',handler)) they will also be removed. Consiquently the events will not fire on the new grid if you replace the old grid with a new one...

Oleg's answer works fine for me as long as I have no Group headers.
When I add group header row with 'setGroupHeaders'
the results of a 'GridUnload' followed by a $('#mygrid').jqGrid({...}) are not consistent.
It works fine in Chrome but not in IE11.
In IE11, each 'jqg-third-row-header' item ends up rendered on different rows (diagonally).
I am using free-jqGrid:query.jqgrid.src.js version 4.13.4 for debugging.
I traced the problem down to code, in this file, that begins with line 9936:
if (o.useColSpanStyle) {
// Increase the height of resizing span of visible headers
$htable.find("span.ui-jqgrid-resize").each(function () {
var $parent = $(this).parent();
if ($parent.is(":visible")) {
this.style.cssText = "height:" + $parent.height() + "px !important; cursor:col-resize;";
//this.style.cssText = "height:" + $parent.css('line-height'); + "px !important;cursor:col-resize;";
}
});
// Set position of the sortable div (the main lable)
// with the column header text to the middle of the cell.
// One should not do this for hidden headers.
$htable.find(".ui-th-column>div").each(function () {
var $ts = $(this), $parent = $ts.parent();
if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)") && !($ts.hasClass("ui-jqgrid-rotate") || $ts.hasClass("ui-jqgrid-rotateOldIE"))) {
// !!! it seems be wrong now
$ts.css("top", ($parent.height() - $ts.outerHeight(true)) / 2 + "px");
// $ts.css("top", ($parent.css('line-height') - $ts.css('line-height')) / 2 + "px");
}
});
}
$(ts).triggerHandler("jqGridAfterSetGroupHeaders");
});
This code sets the height and top css values related to each 'jqg-third-row-header' item. This leads to a tall and diagonal layout of the 'jqg-third-row-header'
Potential Bug:.
The $parent.height() and $ts.height() methods, above, return the former jqGrid table height in IE11. In Chrome they return the 'th' computed height(top = 0).
I added and tested the 2 commented lines that use line-height.
IE11 works fine when line-height is used.
I do not completely understand the JqGrid resize logic, so this may not be a fix.
Alternate Solution:
If you specify.
colModel:
{
label: 'D',
name: 'W',
width: 6,
align: 'center',
resizable:false //required for IE11 multiple calls to this init()
},
When resizable is false the code above is not encountered and the height and top are not set.
Oleg's jqGrid is a very nice control. Perhaps he can test his demo grid with a groupheader on IE11.