I have one table where I have 2 columns that get hidden by the dataTables api. From which when I delete a row from the table I need to pass the data in these columns via ajax so that it gets removed from the database as well..
I have been deleting my rows prior that didn't have data I need in them directly, without any issue. Now I need to change it up for this need and catch those values. Problem is no matter how I have tried to spin it one thing or another breaks.
delete_row = $(this).closest("tr").get(0);
This is what I used to catch the row I want to delete to pass it along when confirmation of deleting the row is made. And that works fine. Now I need to match the logic in creating two new vars that can be read if confirmation is made to pass through my ajax call.
Which I have tried:
var aPos = throttleTable.fnGetPosition($('td:eq(0)', delete_row));
var aData = throttleTable.fnGetData(aPos[0]);
Along with a few different spins to catch the column I want to get the data from. The above breaks the script altogether. The thought came from
var aPos = throttleTable.fnGetPosition(throttle_delete_row);
var aData = throttleTable.fnGetData(aPos[0]);
Which does work but only in returning every column in that row as a string. Which isn't desired. I would run a loop over it but that is problematic as a loop can be expensive, and also there is no distinct method of splitting the data up, as one of the values in one of the hidden columns is a CSV in it of itself. So the loop would be invalid for the need there as well if I split and delimited it by ,
So my ultimate question is, how can I break it down to get column specific?
Well, alright then. Apparently the problem was I was attempting to do to much when all I needed was the fnGetData() bit.
Turns out after playing around with whats actually going on and dumping it all into the console.log() I was able to sort out that all I truly needed to do was throttleTable.fnGetData(throttle_delete_row, 0) for sake of example, to get the hidden column(s) I seek.
$(document).ready(function() {
$('#example tbody td').click( function () {
// Get the position of the current data from the node
var aPos = oTable.fnGetPosition( this );
// Get the data array for this row
var aData = oTable.fnGetData( aPos[0] );
});
返回的都是数组，获取数组对应的下标就可以了！
Related
I am using tabulator package 4.3.0 to work on a webpage. The table generated by the package is going to be the control element of a few other plots. In order to achieve this, I have been adding a dataFiltered function when defining the table variable. But instead of getting the order of the rows in my data object, I want to figure a way to get the index of the rows in the filtered table.
Currently, I searched the manual a little bit and have written the code analogue to this:
dataFiltered: function(filters,rows){
console.log(rows[0]._row.data)
console.log(rows[0].getPosition(true));
}
But the getPosition always returned -1, which refers to that the row is not found in the filtered table. I also generated a demo to show the real situ when running the function. with this link: https://jsfiddle.net/Binny92/3kbn8zet/53/.
I would really appreciate it if someone could help me explain a little bit of how could I get the real index of the row in the filtered data so that I could update the plot accordingly and why I am always getting -1 when running the code written in this way.
In addition, I wonder whether there is a way to retrieve the data also when the user is sorting the table. It's a pity that code using the following strategy is not working in the way I am expecting since it is not reacting to the sort action and will not show the information when loading the page for the first time.
$('#trialTable').on('change',function(x){console.log("Yes")})
Thank you for your help in advance.
The reason this is happening is because the dataFiltered callback is triggered after the rows are filtered but before they have been laid out on the table, so they wont necessarily be ready by the time you call the getPosition function on them.
You might do better to use the renderComplete callback, which will also handle the scenario when the table is sorted, which would change the row positions.
You could then use the getRows function passing in the value "active" as the first augment return only rows that have passed the filter:
renderComplete: function(){
var rows = table.getRows("active");
console.log(rows[0].getPosition(true));
}
On a side note i notice you are trying to access the _row property to access the row data. By convention underscore properties are considered private in JavaScript and should not be accessed as it can result in unstable system behaviour.
Tabulator has an extensive set of functions on the Row Component to allow you to access anything you need. In the case of accessing a rows data, there is the getData function
var data = row.getData();
Is there any way to completely empty a ui-grid (filters,data, column and all)?
I'm trying to empty the grid on button-click so that a new http request can be made and the result displayed using the same grid without reloading the page.
I tried $scope.gridOptions.length=0 but the data remains and on making an new request, the result gets appended to the previous result
To empty a ui-grid data you will need to reinitialize via any array syntax.
$scope.gridOptions.data= [];
To clear all filters ,columns, you will need to later reinitialize the gridOptions itself via object literal syntax.
$scope.gridOptions= {};
Changing the length of grid doesn't make any effect on data. Try this:
$scope.gridOptions.data = {};
$scope.gridOptions.data = []; seems to work.. However it probably doesn't get rid of columns, which is what you wanted. In fact it clearly doesn't, this would be a normal thing to do if you wanted to clear the rows but keep the columns.
I am using jQuery DataTables 1.10.3 to create a table with JSON data fetched from a web service. The data is linked to other elements on the page of my application such that when a user selects data points in one element, the DataTable should update and 'select' the complimentary rows (simply by adding the active class to the rows <tr> tag). Given the documentation, it would appear that this could be easily accomplished with something like this:
var table = $("#my-table").DataTable();
table.rows().each(function(r){
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
But this does not work, since .rows() returns an array of row indexes instead of row objects. Instead, I have implemented this:
var table = $("#my-table").DataTable();
table.rows().indexes().each(function(i){
var r = table.row(i);
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
This works, but is incredibly slow, considering the relatively small number of records in the table (~3 seconds for 3000 rows). Is there a better way to iterate through DataTable rows that I am missing? Or is it possible to make a row selection based on data values? Are the documents incorrect about .rows() returning API objects?
Well, I found an answer to my second question:
Or is it possible to make a row selection based on data values?
var table = $("#my-table").DataTable();
table.rows(function(idx, data, node){
return data.category == 'XYZ' ? true: false;
}).nodes().to$().addClass("active");
This run almost instantly, so it handles my use case, but I'd still like to know what the best way is to iterate through rows in a more general way.
I don't think this is strictly infinite scrolling but it was the best i could think of that compares to what i am seeing.
Anyway, we are using ng-grid to show data in a table. We have roughly 170 items (rows) to display. when we use ng-grid it creates a repeater. When i inspect this repeater from the browser its limited to 35 items and, as you scroll down the list, you start to lose the top rows from the dom and new rows are added at the bottom etc (hence why i don't think its strictly infinite scrolling as that usually just adds more rows)
Just so I'm clear there is always 35 'ng-repeat=row in rendered rows' elements in the dom no matter how far you have scrolled down.
This is great until it comes to testing. I need to get the text for every item in the list, but using element.all(by.binding('item.name')) or by.repeater or by.css doesn't help as there is only ever 35 items present on the page.
Now to my question, how can i make it so that i can grab all 170 items as an object that i can then iterate through to grab the text of and store as an array?
on other pages where we have less than 35 items iv just used the binding to create an object, then using async.js to go over each row and get text (see below for an example, it is modified extract i know it probably wouldn't work as it is, its just to give you reference)
//column data contains only 35 rows, i need all 170.
var columnData = element.all(by.binding('row.entity.name'))
, colDataTextArr = []
//prevOrderArray gets created elsewhere
, prevOrderArray = ['item1', 'item2'... 'item 169', 'item 170'];
function(columnData, colDataTextArr, prevOrderArray){
columnData.then(function(colData){
//using async to go over each row
async.eachSeries(colData, function(colDataRow, nRow){
//get the text for the current async row
colDataRow.getText().then(function(colDataText){
//add each rows text to an array
colDataTextArr.push(colDataText);
nRow()
});
}, function(err){
if(err){
console.log('Failed to process a row')
}else{
//perform the expect
return expect(colDataTextArr).toEqual(prevOrderArray);
}
});
});
}
As an aside, I am aware that iterating through 170 rows and storing the text in an array isn't very efficient so if there is a better way of doing that as well I'm open to suggestions.
I am fairly new to JavaScript and web testing so if im not making sense because I'm using wrong terminology or whatever let me know and i'll try and explain more clearly.
I think it is an overkill to test all the rows in the grid. I guess it would be sufficient to test that you get values for the first few rows and then, if you absolutely need to test all the elements, use an evaluate().
http://angular.github.io/protractor/#/api?view=ElementFinder.prototype.evaluate
Unfortunately there is no code snippet in the api page, but it would look something like this:
// Grab an element where you want to evaluate an angular expression
element(by.css('grid-selector')).evaluate('rows').then(function(rows){
// This will give you the value of the rows scope variable bound to the element.
expect(rows[169].name).toEqual('some name');
});
Let me know if it works.
I have a javascript function that adds a table row id each time a user highlights a row to an array and then also removes that corresponding id from the array when the user unhighlights that same row.
Each row has a unique id field.
I have been trying to using localStorage to remember what row(s) the user has highlighted in the array over multiple sessions so that if they close the browser and come back later I can read from that array and automatically highlight the previously highlighted rows.
I am getting stuck on how to get the localStorage part of it to remember the array as from my reading
of localStorage, it doesn't supports arrays only strings. All I need to do is store an array of numbers to read from each time I load the page.
var selectedTeams = [];
var teamIndex;
$('#leaderboard').on('click', 'tr', function() {
if($(this).hasClass('highlight')){
$(this).removeClass('highlight')
teamIndex = selectedTeams.indexOf(this.getAttribute('id'))
selectedTeams.splice(teamIndex,1)
}
else {
$(this).addClass('highlight')
selectedTeams.push(this.getAttribute('id'))
}
});
Any suggestions on where to go from here would be appreciated.
Cheers
For a simple example, you'd do something like this (which Dave alluded to).
Assuming you have done all your checks for valid localStorage capability.
var someArray = ['<tr><td>test 3</td></tr>','<tr><td>test</td></tr>','<tr><td>test 3</td></tr>']
window.localStorage.setItem('mySavedArray',JSON.stringify(someArray));
then to get it:
JSON.parse( window.localStorage.getItem('mySavedArray') );