I want to check whether the newly added row appear in first page or not. One way of doing it is get the index, but I wonder why it doesn't work, the index for me is not accurate at all.
function add_row(name, time_taken, attempts) {
var t = $('#dashboard').DataTable();
var node = '';
node = t.row.add([
'',
name,
time_taken,
attempts
]).draw().node();
$(node).attr('id', concatSpaces(name)).hide().fadeIn('slow');
var index = t.row('#' + concatSpaces(name)).index() // doesn't work
any thought? stuck for 2 hours long!
API method row().index() returns internal index which doesn't mean row position in the table based on current sorting column and method.
You need to use the code below instead to locate index of the row based on current sorting column and method:
var index = table.$('tr').index(node);
See this jsFiddle for code and demonstration.
Related
My code is a simple form with 3 input fields. Once the user fills them all in and presses the button it will add a row to the table with the input data aswell as an index number. Like this:
https://imgur.com/g5ToOpF
im trying to give each row in a table an index number that is correct with the amount of rows inserted. This works but now I want it to update the index number when I remove one of the rows from the table.
The following function is triggered when the customer fills in an input field with the desired index number that they want to delete and then press a button.
function removeRow() {
let tabel = document.getElementById("tabel");
let rows = tabel.getElementsByTagName("tr");
let indexNumber = document.getElementById("indexnumber").value;
Object.entries(rows).forEach(([key]) => {
if(key === indexNumber) {
tabel.deleteRow(indexNumber);
}
})
}
This works and deletes the row that the customer whats but it doesn't update the index numbers for the other rows. So when I delete row 5. My table will look like this.
https://imgur.com/Zz3sBSI
I figure I have to loop through all of the rows and set the index to the correct number again. Can anyone help me out :) ?
For the full code check:
https://codepen.io/Botert/pen/bJLLWL
grtz,
Botert
To answer your question, try adding the following snippet in your removeRow() function:
for (var i=1; i<rows.length; i++) {
var dataRow = rows[i].children[3];
dataRow.textContent = i;
}
Fiddle here: https://jsfiddle.net/ufszamv4/
It's outside of the scope of the question, but consider taking a different approach to the problem. Try placing your rows in an object that has its properties removed. The goal is to simply delete a row without having to update the rest of the data.
Very Quick points. I have seen very similar questions here on SO but they usually use the table ID or assume there is only one table. I have a page with many tables using the same template (no unique ID) and would like to know if when a particular data is loaded, if the rows are empty. I have tried :
jQuery: count number of rows in a table
Jquery- Get the value of first td in table and many others
//var row = $(this).closest('table tbody:tr:first');
// var row = $(this).closest('tr').children('td:first').text();
// var row = $(this).closest('tr').length;
// var row = $(this).closest('tr').children('td:first').length;
// var row = $(this).closest('table').find("tbody").children().length;
// var row = $(this).closest('table').children('tr:last').index() + 1;
// var row = $(this).closest('table').rowIndex;
// var row = $("tbody").has("tr");
// var row = $(this).closest('tbody').has("tr");
var row = $('#tbody').children('tr:first').length;
But cannot get the right answer.
Below is the table structure:
To get number of rows, use length or size()
//$(this) assumed as element inside table.
$(this).closest('table').find('tr').length
As you mentioned that you've many tables in a page. you need to let jQuery identify the table index from where you want to get tr length.
To get the specific table, use eq()
//To get TR length in 2nd table of a page
$('table:eq(1) tr').length
FYI,
For class selector, use $('.table:eq(1) tr').length
Use $(document).ready(function(){} to wrap your code, that will work when your page gets ready.
Looking at your table structure,
you can use
$(".dataTable tr").length
to get the count of rows in table
$("table").each(function(){
console.log($(this).find("tr").length));
})
This will log the count of trs in all tables that you have in your page
If you want to run some code when data gets loaded into any table you got to use Mutation Observer
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
//create observer
var observer = new MutationObserver(function(mutations, observer) {
console.log("Table Loaded");
//whatever you want to do when table is loaded
});
//set to observe childs ( options )
observer.observe(document.querySelector("table"), {
subtree: true,
childList:true,
attributes:true
});
I went through people's suggestions which mostly assumed (like the other pages) that there was an ID and that there was a single table on the page although the question mentioned it wasn't so.
Ended up using: var row = table_values.context.tBodies["0"].firstElementChild;
I got this by inspecting the tbody via dev tools.
What I'm looking for is an individual column searching function (exactly as this datatables spreadsheet example) for the Handsontable spreadsheet plugin.
What's already existing and has been developed by the Handsontable team is :
Multiple filtering Excel-like (but included in the PRO version) - Cons for my case are that it's not free, and it doesn't quite fit well what I'm looking for.
Highlighting the cell(s) or row(s) based on an user input - The Con is that I need to only display the relevant row(s)
Is there such thing as displaying only the relevant row(s) based on multiple inputs from an user with Handsontable ?
Based on the solution of this blog, I managed to code a solution.
See this JS fiddle that answers all my requirements.
The main function I was looking for is this one :
// The function push every row satisfying all the input values into an array that is loaded
function filter() {
var row, r_len, col, c_len;
var data = myData; // Keeping the integrity of the original data
var array = [];
var match = true;
for (row = 0, r_len = data.length; row < r_len; row++) {
for(col = 0, c_len = searchFields.length; col < c_len; col++) {
if(('' + data[row][col]).toLowerCase().indexOf(searchFields[col]) > -1);
else match=false;
}
if(match) array.push(data[row]);
match = true;
}
hot.loadData(array);
}
What I did is keeping synchronized a table of Strings with the input fields (searchFields), compare the data of each row between inputs and their corresponding column, and push into an array the relevant row(s) to finally display the resulting array. This function is called for any change in the input fields which result in a live table filtering.
Note that I tried my solution for ~10k rows and their isn't any performance issue with Chrome, Firefox and IE.
Also note that I managed to find a solution to keep synchronized the current displayed table with the original data when editing the values, but this is IMO out of the scope of this question. Please let me know in the comment if you're interested about this.
I'm building an app with Appcelerator.
So I have used a Picker component to display a list of value.
Now I want to know what is the index of element that the user have selected.
So I'm try to do this:
var indexRow =$.comboDecription.getSelectedRow(0).getZIndex();
but I have undefined value.
You can use the following code:
// first get all columns
var columnsArray = $.comboDecription.getColumns();
// since it is a single column picker, so first index column's rows will be the ones you need.
var allRows = columnsArray[0].rows;
// get the title of first row, getSelectedRow(index) takes column index which is 0 in this case
var currentRowTitle = $.comboDecription.getSelectedRow(0).title;
// get the titles of all rows, these titles will be used to get the index of current title.
// use underscore library 'map' method to iterate over all rows and get their titles in an array
var allRowsTitles = _.map(allRows, function (row) {
return row.title;
});
// *** OR *** you can use underscore _.pluck method
var allRowsTitles = _.pluck(allRows, 'title');
// finally, this is the index of the selected picker row.
var currentSelectedRowIndex = allRowsTitles.indexOf(currentRowTitle);
I understand that it is the long process, but there are other ways too which depends on your implementation process. Nevertheless, I have shown you the stuffs you can do at run-time, and so you can do other things related to pickers.
gZindex() returns the layer where the view is positioned.
The change event return the current selected index.
I have the following code from selected rows in a grid......
var selected_rows = grid.getSelectionModel().getSelections();
Ext.each(selected_rows,function(item) {
var left_thumbnail_jpeg_name =item.data.left;
var right_thumbnail_jpeg_name = //select second cell along row
Can someone tell me how to set the second cell value along the row to a variable?
James
Please note that your tags did not include ExtJS and that is a bit misleading.
As for your question, since your grid in bound to a store of records you only need to change a record value for it to be imminently rendered to the grid.
in your case it will be :
item.set('right', YOUR NEW VALUE);
assuming that the next column is named right and that you have the new new value.