I am looking at improving the performance of JQuery DataTable. I read about deferRendering option. What i understand is when this option is enabled, once TR and TD are drawn, they are retained and need not be drawn again. Please correct my understanding.
some of the examples I have seen they are using deferRender property and some are using bDeferRender property. Which option is correct?
I am showing around 300 records at a time in grid & loading data from server. How can I check if deferRender option is improving performance
It depends on the version of DataTables you are using.
Converting parameter names for 1.10 You could find the two names here.
For checking if it works, simply output something in "createdRow" callback function, so you can count the actual number of created rows.
Related
EDIT: The reason why Excel was crashing was because getCellProperties() requires an object with the properties to extract as a parameter. I feel so stupid.
Context: I am building a Addin for Excel using the latest Office Javascript API.
Basically what I want to achieve is to extract and convert to JSON all of the attributes of the selected range. That means, getting borders, fonts, cell values, etc.. I have seen that there are some functions that enable me to get some of the properties for the entire range, however some functions will return null if all the cells in the selected range do not have the same values for a set attribute.
So far, I have thought of using selectedRange.getCellProperties(); where selectedRange is the user's current selection in the worksheet on every cell in the range, but for some reason Excel crashes whenever I try to use this function.
So, the only way I can think of is to extract these attributes manually for each cell in the selected range by using a loop inside a loop. This is of course not optimal for performance and I am confident that there is a better solution possible.
How could I go about doing this?
Thank you for taking the time to help!
Thanks for reporting this issue. I can repro the crash after removing parameter from getCellProperties. Crashing excel is not right, i have logged an internal bug to track.
From perf consideration, Maybe you could try getRowProperties API ? As you can retrieve all properties in a row together. and you can convert row properties into JSON string. The performance could be better.
The document can be found at https://learn.microsoft.com/en-us/javascript/api/excel/excel.range?view=excel-js-preview#getrowproperties-rowpropertiesloadoptions-
(--I'd like to add a comment under Raymond's answer, but i didn't have enough reputation, have to post a new answer :( )
As you already know the crash reason of selectedRange.getCellProperties(), how about making sure the parameter is not null ? getCellProperties is the most convenient way I know for your scenario.
We have data around 5000 to 10000.
Now in that data, we have to give conditional styling to row, column or some cell.
I try to give conditional formatting, as they have suggested in this link.
But we are facing performance issues. So how to give styling where there is bigger data.
I tried to use hot.getCell() function, but that function is giving null value.
As, you need to detect the limit of data, obviously you need to check this on either, key strokes (worst), other events, getCell().
getCell() works flawlessly if your code is rendering properly.
You can modify cellProperties in cells option function in configuration object. For example you can call function in cells method, that will check properties which you want to add to your configuration. This should work.
The option mentioned above is called cells not cell. Other than that it's true :)
In my application I have table that can have multiple columns, based on date range selected.
I need to be able to display table containing 20 columns or 50 columns (number of columns is based on data range from parameters). I did that, but I was refreshing page when my parameters changed.
Now I'm trying to do it better.
I've created sample that shows my approach: http://live.datatables.net/fojusec/3
Basically I'm swapping "table" with new content that comes from ajax request and then I'm calling "dataTable" on that new table.
My example works fine, but I was wondering if maybe there is a better way to do it, maybe by reconfiguring table?
Is it safe to do that like I did it? I'm worried about any leaks.
EDIT:
What I'm not sure is if dataTable object is attached to table. So if I'm removing table from DOM should I be removing dataTable object also.
I would like to avoid any conflicts. I clicked on my example for some time and I didn't got any errors.
QUESTION: What is the best way to swap or reconfigure table using datatables 1.10
Maybe this information is out there and my Google-fu is failing me, however I can't seem to find the answer. How can I get the number of rows being currently displayed in a jqGrid?
Every question and answer I've found on this topic tells you how to get either the total number of rows (displayed or not) or the number of rows loaded by an external service. Instead, I'm trying to get how many rows are being displayed in the current page of the jqGrid. One of my jqGrid attributes is rowList:[10,20,30], but I'm not sure how to access which one is selected myself.
All I want is how many rows are being currently dislpayed on each page of the jqGrid. The closest thing I've found so far has been this Q&A, but this displayed how many <tr>s there are and wasn't really what I needed.
$('.ui-pg-selbox').val()
Tested on the latest jqGrid (4.4.1)
Of course, if you have more than jqGrid per page, you can use an wrapper to ensure that it is the one you're looking for.
$('#myjqGridWrapper .ui-pg-selbox').val()
Not sure whether it's the best way, but it gets the job done.
The space means a descendant selector, that is it looks for elements containing the class ui-pg-selbox which are descendant of an wrapper #myjqGridWrapper. That would require having a div or some other wrapper around your table.
UPDATE: Also, if you have the table ID or a reference, you can use a more sturdy way of querying its jqGrid instance's .ui-pg-selbox:
$('#jqgridTableId').closest('.ui-jqgrid').find('.ui-pg-selbox').val()
The following will return you the number of displayed rows on a grid's page:
$('#myjqGridWrapper').getGridParam('reccount');
You shouldn't rely on the view for information. You should pull this information out of the JQGrid model. You can do so by calling the getGridParam method like so:
var rowNum = jqGrid.getGridParam('rowNum');
See here for more information: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
The values in the column filter show properly the first time being opened. Issue comes from the second time onward after adding or deleting the values, filter values in the box are not refreshed (see screenshot below).
After a lot of trial and error, I found that if you run the following function it will give mostly the desired result. I am running this on any change event for the given column.
var filterInstance = gridApi.getFilterInstance('yourColumn');
filterInstance.resetFilterValues()
The bug still needs to be fixed by ag-grid, but this is a decent workaround. It would be good to add some logic to maintain any existing filter selections, but for the time being it fits my purposes. If anyone has a better approach, do let me know. :)