Deletion operations seems to be the slowest in a YUI datatable. I have a datatable with > 300 rows. I need to delete selected rows. I tried removing the selected records from the recordset and then calling table.render() .. While this is okay, can it be made better?
Have a look at the API docs on the "deleteRow" method for the datatable widget (at http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#method_deleteRow). This looks to me like this is what you'd want. Perhaps something like:
var selected = theDataTable.getSelectedRows();
var rset = theDataTable.getRecordSet();
for (var x = 0; x < selected.length; x++) {
theDataTable.deleteRow(rset.getRecordIndex(rset.getRecord(selected[x]))
}
No. This is slower than what I wrote.
Here you delete row by row and each time datatable has to be re-rendered.
What I did was remove these records from he recordset and then render the datable once.
Thats faster, but not a whole lot.
To my knowledge that is the fastest way to delete a row from a yui datatable. However, for your user's sake, unless 300 rows is necessary, you should consider pagination which is improved in version 2.6.0 (and has been split out and can now be used on other objects and not just DataTable).
Related
Performs the task of adding approximately 2000 rows per second to Tabledata:
$.each(data.msg, function(count, item) {
tabledata.push( {"#":"#",
"Timestamp":item['Timestamp'],
"ID":item['ID'],
"ID2":item['ID2'],
"DLC":item['DLC'],
"Offset":item['Offset'],
"Detect":item['Detect'],
})
});
//append table row
table.rows.add(tabledata).draw();
However, as time goes on, too much delay is consumed in rendering and the real-time meaning disappears. Therefore, we are working on initializing the table or deleting rows by a certain period.
if ( tableCount%10 == 0 ){
console.log("remove");
table.rows($('#packetList tr')).remove().draw(false);
tableCount = 0;
}
However, the problem now is that only one page is deleted from the paginated bootstrap. I have tried to figure out what to do when I want to delete the entire pagination data, but it is difficult to identify a clear example. Please let me know if you know anyone!
p.s. In addition, please let me know if anyone knows the best way to avoid delays in expressing over 2,000 data points per second or more on a web page.
Is it possible to force update only one td (cell) for view ?
There is a method hot.render(), but it rerenders all cells.
I want to update table content JSON data (hot.getData()) using ajax, but I can't find how to force render the table. My table is so huge to rerender each time I receive the data.
E.g.,
$.ajax(url,... ,success: function(d){
var data = hot.getData();
data[parseInt(d['row'],10)][d['col']] = d['value'];
hot.render();//please, change this function into more simple.
},
...
);
is it possible to update a TD-cell at [row,col]?
I agree complete grid rendering is good , however there is one drawback.When we render the complete grid it will scroll back to the row 1 , it will not store the last view we have before render.E.g. i am in the row number 100 as soon as i render grid will come back to row number 1 , now user has to scroll back to row number 100 again which is frustrating.
Any solution to this issue.
I found we could use hot.selectCell(100,1) to go back to row hundred , however how do i store that we were in the row number 100 programmatically, so that i could set it back to that row.
I did one customRendering to change the value of the Grid by using below code, however it has some performance issue when we have large number of row to change.
//Below code will render one row ,similarly apply the loop to modify multiple row.
data.Records[i].Values.forEach(function(value, ix) {
hot.setDataAtCell(i, ix, value);
//i is row number , ix is the column number , v is the new value.
}
However hot.setDataAtCell(i, ix, v) is a costly, so if you have a large number of row then it will hit the performance.However benefit is it will do the custom(single/mulitiple) cell/row rendering without scrolling the grid and preserving the user view.
P.S. in place of hot.setDataAtCell you could use setDataAtRowProp to set the value for a row , however i have not tried.
Re-rendering the entire table is the only way Handsontable will allow you to render and it's there for a few good reasons. First off, it doesn't matter how large your table is since there is virtual rendering in use. This means that it will only render what you can see plus a few more rows. Even if you had trillions of rows and columns, it would still just render enough for you to think it's fully rendered. This is not an intensive task assuming you're not doing something funky with a custom renderer.
The other reason why it renders everything from scratch is that it's Handsontable's way of keeping a stateless DOM object. If you started manually rendering specific cells then you could end up with an out of sync looking table. And, again, since virtual rendering restricts what gets rendered, there's no performance issue associated with a full re-rendering.
You can use setDataAtCell() method to update one or more cells.
setDataAtCell(row, column, value, source)
Set new value to a cell. To change many cells at once (recommended way), pass an array of changes in format [[row, col, value], ...] as the first argument.
Source: https://handsontable.com/docs/7.2.2/Core.html#setDataAtCell
For example:
var row = 3;
var col = 7;
var value = "Content of cell 3,7";
hot.setDataAtCell(row, col, value); // Update a single cell
Method also accepts an array of values to update multiple cells at once. For example:
var cell_3_7 = [3, 7, "Content of cell 3,7"];
var cell_5_2 = [5, 2, "Content of cell 5,2"];
hot.setDataAtCell([ cell_3_7, cell_5_2 ]); // Update a multiple cells
Note that Handsontable documentation does not recommend re-rendering the whole table manually.
render()
Calling this method manually is not recommended. Handsontable tries to render itself by choosing the most optimal moments in its lifecycle.
Source: https://handsontable.com/docs/7.2.2/Core.html#render
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 am deleting the records from a JqGrid using the Multiselect option.
grid.jqGrid('getGridParam', 'selarrrow')
Using the above line I get the user selected row ID's and make an ajax call, pass the ID's, and delete them from the DB.
My doubt is after deleting should I re form the grid or what is the best way to handle this?
Any working example would be great.
You could reload the grid, but that will cause another round-trip the server.
Alternatively, since you already have the ID's the rows you want to delete, you can just loop over that list and use delRowData method to delete them. This will provide a more responsive solution:
var rows = grid.jqGrid('getGridParam', 'selarrrow');
rows = rows.slice(); // Create a copy of the array since it
// is indirectly modified below
for (var i = 0; i < rows.length; i++){
jQuery('#mygrid').jqGrid('delRowData', rows[i]);
}
Due to the fact that as changes happen in the db the grid will be stale you may actually want to reload the grid in order to keep the data from going stale.
Is there a way to delete all rows in one function call? and not by looping through all rows and deleting row by row.
Thank's In Advance.
If you mean remove all rows from the grid you can just do this..
$('#grid1').jqGrid('clearGridData');
It's depend on what you exactly mean under "deleting of all rows". The method GridUnload could be very helpful in many cases, but it delete more as only grid contain.
Another method used intern in jqGrid is:
var trf = $("#list tbody:first tr:first")[0];
$("#list tbody:first").empty().append(trf);
Probably it is what you need. It delete all grid rows excepting of the first one. You can overwrite the code also as the following
var myGrid = $("#list"); // the variable you probably have already somewhere
var gridBody = myGrid.children("tbody");
var firstRow = gridBody.children("tr.jqgfirstrow");
gridBody.empty().append(firstRow);
If you're going to remove all rows and insert grid data back, you may use $('#grid1').jqGrid('GridUnload');
Otherwise, you can use old answer suggested by Oleg