I'm using Datatables to display some data. I also have inputs that are used to add a new row to the data. When I add this row, I reinitialise the table, and it automatically sorts the new row according to the sorting rules I give it. My question is this: Is there a way to get the data from the table in the order it's currently being viewed? Whenever I try
$('#tableCompetitors').dataTable().fnGetData(),
it gives me the data in the order it was added to the table not the ordered it's being presented in.
So is there an easy way to do what I want?
P.S. If it helps. The original datasource is an array of arrays that is provided from a textbox. I parse it, push it to an array, then use that array as the datasource.
I came across this with the same question. While the accepted solution may work, I found a better way:
$("example").DataTable().rows({search:'applied'}).data()
See selector-modifier documentation for more information.
Here is one solution using 3 of the API callbacks.
Create variable for CurrentData
Reset CurrentData to empty array within fnPreDrawCallback which fires before the new table is rendered
fnRowCallback gives access to array of data for each row, push that array into CurrentData array
fnDrawCallback fires after table rendered, can now access sorted data in CurrentData array
JS
var currData = [];
$('#example').dataTable({
"fnPreDrawCallback": function(oSettings) {
/* reset currData before each draw*/
currData = [];
},
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
/* push this row of data to currData array*/
currData.push(aData);
},
"fnDrawCallback": function(oSettings) {
/* can now access sorted data array*/
console.log(currData)
}
});
DEMO: http://jsfiddle.net/ne24B/
Just trying to give you another option.
The following will get all the rows in the table, even if they are filtered out:
var currData = [];
var oTable = $('#example').dataTable();
oTable.$("tr").each(function(index, row){
//generate your array here
// like $(row).children().eq(0) for the first table column
currData.push($(row).children().eq(0));
// return the data in the first column
currData.push($(row).children().eq(0).text());
});
or if you just want the results that match the filter then:
var currData = [];
var oTable = $('#example').dataTable();
oTable.$("tr", {"filter":"applied"}).each(function(index, row){
//generate your array here
// like $(row).children().eq(0) for the first table column
currData.push($(row).children().eq(0));
// return the data in the first column
currData.push($(row).children().eq(0).text());
});
currData will contain the sorted list of the first column data.
Edit:
To get the entire row's text into the array.
$(row + " td").each(function(index, tdData){
currData.push($(tdData).text());
});
or
$(row).children().each(function(index, tdData){
currData.push($(tdData).text());
});
This way you have a little more control on what the array can contain. My 2 cents.
Related
I am using an amazing tabulator plugin for managing tabular data, API is very clear and reliable but i cant do a very simple thing: get/select all rows on current page.
Custom row selection can look like this:
table.selectRow(table.getRows().filter(row => <<Custom Selection>>);
Where Custom selection has to respect the current page, but i dont get from where i can take it.
Maybe i am missing something?
There is no way to do that directly form Tabulator, but is should be fairly easy to do yourself with a bit of JavaScript.
First you want to get the rows that are visible on that page:
var pageRows = table.getRows(true);
Then you want to get the selected rows
var selectedRows = table.getSelectedRows();
then you want to find rows that exist in both arrays, these will be the selected rows on that page:
var rows = selectedRows.filter(value => -1 !== pageRows.indexOf(value));
Assuming the column name of your index is 'id' you can do the following:
var selectedData = table.getSelectedData();
jQuery.map(selectedData, function(value, index) {
console.log(value.id);
});
I'm receiving data from a websocket (live stream), and trying to put it into a table. I'm currently using the following code:
var table = document.getElementById("websocket-data");
function writeToScreen(message) {
var new_row = table.insertRow(0);
var cell1 = new_row.insertCell(0);
var cell2 = new_row.insertCell(1);
var obj = JSON.parse(message.data);
console.log(obj.value);
cell1.innerHTML = obj.id;
cell2.innerHTML = obj.value;
}
This works, and creates a new row for every JSON packet. The functionality that I am looking for is: On receipt of a JSON, if the id is not in the table, then create a row with id and value, however, if the id is already in the table, simply update the value. I've come across a few ways of doing this, but I'd like to know what the 'proper' way to do it is. I was thinking that perhaps the data should go into an array, and then the array should populate the table, but that would involve repopulating the entire table every time the array changed... I'm happy to use JQuery or similar if necessary.
You could use an array and repopulate the table every time like you said, and if the table will only ever be small then you may not run into issues with that.
One possible alternative of many is maintaining an object in the background with your ids as keys and then store the value and the table row index as values.
Something like:
var tableStore = {};
function recieveMessage(message) {
var obj = JSON.parse(message);
// if the id is not in the tableStore, add it!
if (tableStore[obj.id] === undefined) {
// insert new row into table and save the index into `newTableRowIndex`
// store a blank value (updated below) and the index in the table where it will be displayed
tableStore[obj.id] = {value: undefined, tableIndex: newTableRowIndex};
}
// if the value recieved is different than the stored value, update the row
if (obj.value !== tableStore[obj.id].value) {
tableStore[obj.id].value = obj.value; // store the new value
var row = getTableRow(tableStore[obj.id].tableIndex); // your own function to get the row based on index
// update the row to display the new information
}
}
This could be improved and made to be more organized but you should get the idea.
This way it would only update anything in the display if the new information recieved is different than the old information already stored.
This way should also perform better than using an array would if the table has the potential to get very large as you would not need to search through the entire array every time to see if the id is already stored or not. You would simply access the tableStore entry directly using the id.
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.
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'm using the latest SlickGrid, with dataView.
I subscribe to the onActiveCellChanged event to react to a user selecting a row, and get the cell contents of the first column with:
grid.onActiveCellChanged.subscribe(function(e, args)
{
var cell = args.cell;
var row = args.row;
vat cell_contents = data[row][grid.getColumns()[0].field];
This works perfectly until I filter the table. Then args.row doesn't match the row in the data table.
How can I map the filtered row number (given in the event), to the actual row of the data that I want to read?
i.e. A filtered grid could yield one row of data, but could actually be row ten of the actual data table. I need to be able to read the data in the visible row selected.
After numerous attempts, I finally managed to do this. For anyone else that comes looking, what I did was:
grid.onActiveCellChanged.subscribe(function(e, args)
{
var cell = args.cell;
var row = args.row;
var row_data = dataView.getItem(row); // Read from dataView not the grid data
var cell_contents = row_data['id'];
This solution compensates for re-ordered columns as well as filtered rows.