Jquery, getting the column data of selected row using jtable - javascript

I have 3 fields in my jtable; Name, Age, Occupation.Lets say I select a specific row, How would i get the specific column data of that row?
Ex:
I select the following row:
Row 2: Joe Brown, 25, Teacher
How would I get the age data (which is 25) of that row ?
Thanks
PS: I intend to delete that row, so I need the name to query the sql database properly (im using jdbc)

$('#yourTable tr').each(function() {
var age = $(this).find("td").eq(1).html();
alert(age);// for testing purpose
});
You will get the value of the second row (the index is zero-based)

var rowIndex = // the zero based index of the selected row
var age = $('.jtable tbody').children(rowIndex).children('td').eq(1).text(); // return the age

Related

How to get columns names of jquery:datatable where the columns are created dynamically?

I have a jquery:datatable in my code where its columns are created dynamically in the C# based on some table records in SQL.
In this datatable, I use a custom button called "Save". I need to get the column names of the table here as I get the data in the rows but I couldn't find the correct syntax to get the column names.
...
text: 'Save',
action: function (e, dt, node, config) {
var json = JSON.stringify(dt.rows().data().toArray());
// how to get the columns??
// probably I need to use dt.columns().header() at some point?
}
...
I believe I need to use dt.columns().header() as it gives me tags with a lot of info, not sure how I can retrieve column name over there.
Any help would be appreciated.
With the method
table.columns().names();
I've found my own answer. Here it is:
var cols = ""
dt.columns().header().each(function (e, i) {
var col = jQuery(e).html();
cols += col + ",";
});
Thanks.

Cross reference names on spreadsheets to get specific data points (looping through an array)

I have two sheets. Test Data has 3-4k entries of many columns of data and Order Changes has no data at all. I would like to search two specific columns on Test Data, a column of names and a column of yes or no. If column two of Test Data contains a 'yes' in the cell then the name of that person would be placed into a cell on order changes.
This is what I have so far:
function isThreshold(){
var data = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Test Data");
var cdata = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Order Changes");
var lc = data.getLastColumn();
var lookUp = data.getRange(1,6,3,2).getValues();
lookUp.forEach(var info in lookUp){
}
Logger.log(lookUp);
}
I probably shouldn't loop through that many entries but I don't know of any other way. Should I combine the forEach loop with an if loop to get the desired result or use some other method?
I believe your goal as follows.
You want to retrieve the values from the cells "F1:G" of sheet "Test Data".
You want to search yes from the column "G" and when the column "G" is yes, you want to put the value of the column "F" to the sheet "Order Changes".
Modification points:
SpreadsheetApp.getActiveSpreadsheet() can be declared one time.
In this case, you can retrieve the values from the range of "F1:G" + data.getLastRow() of "Test Data", and create the array for putting to the sheet "Order Changes", and put it.
When above points are reflected to your script, it becomes as follows.
Modified script:
function isThreshold(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var data = ss.getSheetByName("Test Data");
var cdata = ss.getSheetByName("Order Changes");
var valuesOfTestData = data.getRange("F1:G" + data.getLastRow()).getValues();
var valuesForOrderChanges = valuesOfTestData.reduce((ar, [f, g]) => {
if (g.toLowerCase() == "yes") ar.push([f]);
return ar;
}, []);
if (valuesForOrderChanges.length > 0) {
cdata.getRange(1, 1, valuesForOrderChanges.length, valuesForOrderChanges[0].length).setValues(valuesForOrderChanges);
// or cdata.getRange(cdata.getLastRow() + 1, 1, valuesForOrderChanges.length, valuesForOrderChanges[0].length).setValues(valuesForOrderChanges);
}
}
In this modified script, from your question, it supposes that the columns "F" and "G" are the value of name and yes or no.
References:
getRange(a1Notation) of Class Sheet
reduce()

Show last group in tabulator

I use tabulator, is there any other possibility or a ready-made example of functions to show only the last group?
var lastGr = function(value, count, data, group){
return group(count) > group(count)-1; // Show only the last group
};
var table = new Tabulator("#tables", {
groupStartOpen:lastGr,
...
Why do you want to show only the last group are you trying to sum all
the rows, etc.
If yes then check documentation
If you want to update the table with only last row, you can do
table.clearData();
table.addData([{id:1, name:"bob", gender:"male"}, {id:2, name:"Jenny", gender:"female"}], true);
pass the last row to add Data Function as in documentation

Fill javascript arrays from html form

I have a PLSQL form with multiple duplicate elements. example:
row1 - name, number, address
row2 - name, number, address
row3 - name, number, address
Is there a way to collect each row name into a javascript array then each row number into the second array, etc. Then send the values as an array to the PLSQL procedure to process each transaction to the DB.
function(){
var name = [document.getElementById("name").value];
var number = [document.getElementById("number").value];
var address = [document.getElementById("address").value];
window.location.href = https://server/schema.package.procedure?name="+name+"&number="+number+"&address="+address+"";
}

Order by sorted array

I have a page that contains a table like the following (automatically sorted by "Name" column)
Name Open Num Total Num
-----------------------------------
Doe, John 0 0
Smith, Sarah 4 3
Tyler, Rose 7 8
The second tr would look like this:
<tr id="1"><td class="N">Smith, Sarah</td><td class="O">4</td><td class="T">3</td></tr>
Where the row ID is a counter (first row = 0, second = 1, third = 2, etc.) and the cell class is to grab the column using jQuery ($(".O") gives Open Num column)
I'm trying to get the table to sort based off of the numerical columns (Open Num and Total Num). So output would look like this (sorted by Open Num or Total Num):
Name Open Num Total Num
-----------------------------------
Tyler, Rose 7 8
Smith, Sarah 4 3
Doe, John 0 0
So far, I store the numbers into an array arrQuick and I store the row number in a different array rowCount. I then use the Quick Sort method to sort the data, at the same time sorting the second array, which works perfectly. So now I have the sorted data and the order that my rows should be in.
The Problem
I cannot figure out how to get the table rows to update correctly.
So far I have this.
for(var i=0;i<rowCount.length;i++){
var tmpHolder=$("#"+i).html();
$("#"+i).html($("#"+rowCount[rowCount.length-(i+1)]).html());
$("#"+rowCount[rowCount.length-(i+1)]).html(tmpHolder);
}
When stepping through I can see that initially the updating is working. However, eventually it gets to some point rows are getting updated to places they shouldn't be and I'm not sure why.
You can sort the rows based on the values of table cells. The following method accepts a className of the cells and sorts the rows based on the text contents of that cells.
$.fn.sortTable = function(cls) {
this.find('tr').sort(function(a, b){
return $(a).find('td.'+cls).text() > $(b).find('td.' + cls).text();
}).appendTo(this.find('tbody'));
}
$('table').sortTable('O');
Updated method for supporting ascending and descending orders.
$.fn.sortTable = function (opt) {
var sort = typeof opt.sortType !== 'undefined' ? opt.sortType : 'asc',
cls = opt.cls;
if (!cls) return;
var $tr = this.find('tbody').children().sort(function(a, b){
return $(a).find('.' + cls).text() > $(b).find('.' + cls).text();
});
if (sort === 'des') {
$tr = $tr.toArray().reverse();
}
this.find('tbody').append($tr);
}
$('table').sortTable({
cls: 'N', // className of the cells
sortType: 'des' // order 'asc' || 'des'
});
http://jsfiddle.net/Af7mG/

Categories