How can I get the number of rows displayed in a jqGrid? - javascript

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

Related

Better way to create a paginated list of divs

Problem:I need to create a list of "divs" which will contain information regarding hostels (profile picture, a button to book a room there and some short info). This list will be dynamically created through a query to a database. The list should be paginated and only show the first n hostels by making Ajax calls to the db.
My solution: Have a template div created iteratively. Use javascript to implement the pagination requirement.
My question: Does my invent the wheel solution make sense? Or am I better off using some existing library/framework to achieve this if yes any suggestion regarding existing tool would be appreciated (It might be off topic but have failed to find a single library to achieve this).
normal table with one column and three rows
table with one column but splitted rows
There are plenty of libraries available to achieve it, one of which I used is
datatables.js
and is working fine. Has option for paging, sorting searching etc.
Just to give an idea based on your design, you can have a single column table which can have the template of your div (datatables give option to define template for your column) and then you can define sorting as well based on some of your fields data.
Paging it does automatically but you can still configure it.
It also has feature of searching, so you can give option to search for particular hostel or price or anything.

Handsontable - hide specific row ( by cell value)

How to hide specific rows in Handsontable.
I have buttons in DOM, each of them should hide specific rows.
For example: click button with class `alarm' should shide all rows which second column has value 'alarm'.
For now i do ugly thing. Every button click i loop overy my tableData and delete datas with 'alarm' then just load data and render table. But i can't do that becouse i have some dynamic datas so after render their disapear.
eveGrid.loadData(tableData);
eveGrid.render();
Dynamically hiding rows is quite a complex task which is not documented in the Handosntable documentation. However, there is plenty of functionality available to implement it ourselves. As a matter of fact, I had to do this just last week so I can share with you a potential approach. It's really quite simple and similar to your solution, which is not ugly by the way!
What you want to do is keep two copies of your data. The first we can call data, and the second activeData. Initially, they both equal each other. Now this part is tricky and not easy to grasp but what you have to make sure is that these two arrays are DIFFERENT OBJECTS, but have the SAME REFERENCED ELEMENTS. What this means is that the arrays themselves are not clones, so an equality test would fail. However, their elements are clones. Your activeData elements are just references to the elements on data.
Once we have this set up, it's simple to implement the hiding of rows. Your click should look through data and set a new activeData based on the matching rows you want to display. Then just update handsontable with something like:
hotInstance.updateSettings({data: activeData});
And that's it! Note that that updating method will automatically trigger a render().
Let me know how it goes, I'm curious to see if other people can use this approach.

What is the right way to enable deferRendering in Jquery DataTable

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.

Datatables 1.10 - Swap table

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

Dynamically Loaded table - Sort with Javascript - No errors? What's happening?

I've got a table that I'm trying to sort.
The Table is loaded by a javascript and inserted into the document by: (abreviated)
document.getElementById("").innerHTML("")
Once the table has been loaded, I want to make the table sortable. But it's not working? I'm not getting any errors on FireBug. and I've tried this with several different table sorting scripts.
I've been researching it a little, and can't find much on dynamically loaded tables. This one comes close "How to sort a dynamically rendered table...?" but I want to know more about why that one is working, and mines not.
My Sample site "http://play.tol1dc.homedns.org" So you can see what I'm doing.
You need an id on your table, not a class, as specified here:
// Note that all the tables that need to be sorted MUST contain ID
tag. // So, if they do not exist, you must create one for each table
that // needs to be sorted. Also, the table names/ids MUST BE UNIQUE.
Replace class by id in your severside code that generates the html table.

Categories