We Keep Coding

DataTables - Search in multiple columns with a single drop down

I'm working with DataTables and i'm trying to search a result in a table with a dropdown. But rather than searching one column, I need to search in two specific columns.
The below syntax works with a single column but how do i do it with multiple columns?
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.column([4]).search($(this).val()).draw();
});
I tried doing this but when i use this code it only searches the result in the first column, E.g. 4th Column. and ignores the rest.
table.column([4,5]).search($(this).val()).draw();
What is the proper method for this?

Lets summarize all things here. It will help other people as well.
You can achieve this as follow:
table.column(4).search(this.value).column(5).search(this.val‌​ue).draw();
It will perform search on 4 column (4 is index of column), after that it will filter data from 5 column against provided filter value and at the end it will draw the table.
One thing to keep in mind is that Filter is applied on both columns, so both columns must contains matching data.
Here is its filddle
This can be achieved by using fnMultiFilter as it documentation explains:
This plug-in adds to DataTables the ability to set multiple column filtering terms in a single call (particularly useful if using server-side processing). Used in combination with the column sName parameter, simply pass in an object with the key/value pair being the column you wish to search on, and the value you wish to search for.

Use columns() in place of column():
var table = $('#example1').DataTable();
$("#filter").on('change', function() {
table.columns([4,5]).search($(this).val()).draw();
});

From the doc, you should be using .columns() (note the plural)

For an OR search among multiple columns, disable columns for the search using
columns.searchableSince: Enable or disable search on the data in a certain column.
Alternatively, you can also use an HTML attribute to remove the column from the search
<th data-searchable=false>

Color row by comparing two columns google visualization DataTable

I am using google.visualization.DataTable and I have two relevant columns, we'll call them colSmall and colLarge. If colSmall is larger than colLarge in any given row, then I would like to make that row's background color red.
The closest I've come is by using google.visualization.ColorFormat(). I am able to make a formatter and addRange, which I can use to hard-code a particular value so that if colSmall is over that value, it will be red (see below).
var formatter = new google.visualization.ColorFormat();
formatter.addRange('100', null, 'black', 'red'); // anything greater than 100 will be red (the quotes are because these are string values)
formatter.format(data, 7); // colSmall is index 7
I have been unable to find a way to make it look at another column for this row. Another problem I have is that this only makes the cell red rather than the entire row.

I found a hacky way of doing it, but it I would still prefer something better.
Instead of building up the data and then adding it all to the table, I can insert each row into the table and format it there.
Then, for any given row, I can do something like:
var rowIndex = data.addRow(val);
if (colSmall > colLarge) {
data.setProperties(rowIndex, 2, {style: 'background-color:red'});
}
For each column in that row (rather than just column 2).
I would like to be able to use setProperty or, better yet, setRowProperty, but every time I try any of these methods, it simply does not work, so I'm settling for this for now.

Get Row Number with Handsontable

Super noob question here. I have an array of row indexes that I would like to use to change the color of my Handsontable rows. I figure HOT would provide a method to retrieve the tr element of a table with something like hot.getRow(5), but it doesn't seem to exist.
So in a nutshell I'm trying to do this
var rowIds = []
$.each(rowIds , function (i, element) {
var row = hot.getRow(i);
$(row).closest('tr').css('color','green');
});
I've found I can use getCell() method which accepts a row and column # along with a boolean, but using this would require extra code for something that should be as simple as passing a single argument. Is there a method I'm overlooking or is this the only way?

Here's the thing with how HOT works: it is a JS object which renders a stateless DOM table. This means you should never EVER try to manually modify the HTML of your table. Even if you did want to do that, as soon as you make a change to those green cells, they would get re-rendered, not green.
Instead, you want to use the readily accessible 'custom renderers' that are associated with each column or cell, depending on how you define them. These are applied just like the data attribute in the columns or cells definition. They are functions and here's an example:
function greenCellRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.color = 'green';
}
You should read up on the full documentation to understand the full power of the renderer but it's pretty clear from the arguments it takes what you can do. One thing you would be able to do is apply the green color you're hoping for. Of course to selectively do this you would either apply the renderer to specific cells, or put a conditional inside this general renderer using the row and col arguments to your advantage.
Hope that helps!

Jquery eq() use column name instead of index

I have this jQuery to get the 5th column text in a table and change the text of a textbox
$('textbox').val($(e.target).closest("tr").find('td:eq(4)').text());
However, lets say another developer moved the index of the columns (Yes I could comment to say don't move around or use the correct index, but I guess this is the lazy way) then it would incorrectly select the wrong column's text. So how could I change eq(index) to use a static column name instead?
Thanks

Give the cell a class, then select by class:
$('textbox').val($(e.target).closest("tr").find('td.myClass').text());
Or to use the attribute you mentioned in comments:
$('textbox').val($(e.target).closest("tr").find('td[aria-describedby="yourValue"]').text());

An alternative approach that would not depend on any specific implementation like jqGrid would be to keep an array with the column names like:
var columnNames = [];
$('table').find('th').each (function () {
columnNames.push($(this).text().trim());
});
Then you can get an index of a column with a O(1) operation:
var index = columnNames.indexOf("Inv No");
And you can use that index in your existing expression:
$('textbox').val($(e.target).closest("tr").find('td:eq(' + index + ')').text());
This would give you the flexibility to switch to another table/grid plugin without changing the code!
Here is an example applied to HTML rendered by jqGrid:
http://jsfiddle.net/fukt548f/1/

this may help you
$('textbox').val($(e.target).closest("tr").children().eq(4).text());

Calling JS function after BIND?

I'm building a ColdFusion 10 form, similar to an invoice. It contains three columns.
The first column is a filter to select a subset of all available products: it contains cfselect that are built from a query of product categories.
The second column is the product itself: it contains cfselect that are BINDed to a table containing a product list, only showing the products from the matching category.
The third column is the product price: it contains cfdiv that are BINDed to the product prices, in the same table.
I'm looking for a way to compute the total price (sum) of the selected items. I'm especially looking for the "something has changed" trigger to attach to.
Solutions that I see:
the total is another BIND, depending on the price on each item. A bit ugly, since this would be done server-side, even if a simple JS could do it.
use onChange on the cfselect. In that case, how can I ensure that the price BIND have been performed before the total is computed?
use onChange on the cfselect, and directly query the prices in that script (i.e. remove the BIND on the price columns) with XMLHttpRequest. I wrote some code to do this and it seems to work, but I still need to change it to asynchronous requests, and decode the return in an browser-independent way. This seems way more complex than needed.
use a (non-existing) onChange on the cfdiv. This would be the easiest... but that hook doesn't exist.
use a cfselect/cfinput instead of the cfdiv in the third column, and cheat with css to make it look like a div. Ugly.
same as previous, but hidden, and keep the existing cfdiv visible. Probably the best bet right now, but all queries will be performed twice. I'm sure there's a better way.
use a timer. I'd rather avoid that.
What am I missing?
Thanks.

Answering my own question, in case it can helps someone else.
What I had trouble finding and that this example may illustrate
rough jQuery equivalent of simple CF BIND
example of $.get() that actually do someting with the downloaded data, not just alert() it
$.get() definitely isn't the recommended way to get introduced to jQuery.
This will probably make the "pros" shout in horror. It shouldn't be considered copy-paste code, only hints on figuring a way to do it.
It actually has been strongly edited from my working version, so it may contain dummy typos.
OK, enough disclaimers.
function dollarize (price) {
// unrelated code - just ensure that the price is always displayed with two decimals
}
function downloadPrice(url, DOM_Item_ID) {
$.get( url,
function(data,status){ // keep in mind that this function is called ASYNCHRONOUSLY
//alert(data); // typical data received, for a $1 item: <wddxPacket version='1.0'><header/><data><string>1</string></data></wddxPacket>
var payload = $(data).find('string').text();
$('##' + DOM_Item_ID).text('$' + dollarize(parseFloat(payload))); <!--- normally a single # - doubled since in a <cfoutput> --->
UpdateTotalPrice();
},
"xml");
}
function UpdateTotalPrice() {
var price = 0;
for(var e=1;e<=#MAX_NUMBER_ITEM#;e++)
{
var node = document.getElementById("Item_"+e);
var ID = node.selectedIndex;
if(ID != 0) {
prix += parseFloat(document.getElementById("Price_"+e).childNodes[0].nodeValue.substring(1)); // substring(1): removes the $ added above
}
}
document.getElementById('TotalPrice').childNodes[0].nodeValue = '$' + dollarize(prix);
}
function onChangeItem(e) {
var ID = document.getElementById("Item_"+e).value;
downloadPrice("#application.CFC_PATH#gestion-equipements.cfc?method=trouvePrixStandardEquipement&ID="+ID,
"Price_"+e);
}
2nd column:
<cfloop from="1" to="#MAX_NUMBER_ITEM#" index="e">
...
<cfselect Name="Item_#e#" ID="Item_#e#" bind="........." bindonload="yes" queryPosition="below" onChange="onChangeItem(#e#)"><option value="0">--</cfselect>
Each price item in the 3rd column:
<cfdiv ID="Price_#e#" align="right">$0.00</cfdiv> <!--- content of the div (i.e. $0.00) must NOT be empty, otherwise childNodes[0] above will fail --->
Total price:
<cfdiv ID="TotalPrice">$0.00</cfdiv>