Table rows count from multiple pages - javascript

In Javascript, I have a table that contains multiple rows (100 rows). In my UI, I can show only 20 rows per page. So, these rows are displayed in 5 pages.
When I am trying to get the row count of the table using tbl.rows.length, it is giving me only 20 not 100.
In this scenario, which function can I use to get the total count of the rows?

There's no good way to do this with javascript alone, unless you have something like Showing 1-20 of <span id="num_rows">100</span>, then you can grab the content of that span.
Using AJAX to query the server seems like overkill.
One way or another, you should probably just insert the total rows value into your html somewhere, and just read the value with javascript. You could even set an attribute like data-total_rows="100" to the table if you desire - there are plenty of options.
Whatever you choose using this method, the value would have to be updated as well if you are dynamically adding/removing rows.

Related

Add dynamic column to table in smart-table [angularjs]

I needed a little help over here on adding dynamic columns to table and I'm using smart-table project https://lorenzofox3.github.io/smart-table-website/
Please look at plunker
https://plnkr.co/edit/uTDa6hfwdgGtGWkYqL7S?p=preview
Click on add new column, it will update the table header, but I can't update the td element because I haven't created or binded any td element for new column.
Need help on two things.
1) Any number of new columns might come in future from server dynamically, so I can't bind any element statically in html like I did right now.
2) This is a little long one(I want to create a only one header as MV and in colspan I want current and next) and How do I accomplish that one ? If I divide like that, how do I go frame the data ?
Additional Note on Question 1: I have tried dynamically showing the data in table. please look at line 27 in index.html. But again, If I go with this approach, the values get binded to different different columns since, data's are framed dynamically on controller. To be simple, there is no guarantee that data will be in in this order.
(SNo, companyName, companyFullName, MarketValueCurrent, MarketValueNext, QuarterCurrent, QuarterNext)
companyName might come first or at last. If I go by dynamic looping using ng-repeat, it binds MarketValueNext in first column, then companyName, etc in whichever the order the data is coming.
Thanks in advance.

Reloading or Refreshing JSON and HTML div load order

I am trying to create some code that will allow me to pull and display stock data for a Smart Mirror Project that I am building.
I have gotten it to display all the information but am not able to update the stock data. I want it to update the information every 5 seconds but when I do this, it basically goes on repeat and continues to output all the stocks over and over, off the page.
How can I get it to reload the data without reloading the entire page and how can I tell that it is working? Is it possible add a css element that flashes the prices yellow whenever the price changes?
Here is my code in fiddle: https://fiddle.jshell.net/Aurum115/2kbpt91z/17/
Edit: To clarify the second part. I basically want to still store the old price and compare it to the new price temporarily and quickly flash the text yellow if it has changed.
The problem you have is that you are appending the new HTML to the existing HTML.
To solve your problem, you need to delete the existing contents of the divs that your are updating. You should add the following code after the setInterval(,,, line:
$("#title").html("");
$("#livePrice").html("");
$("#stockTicker").html("");
$("#livePercent").html("");
$("#liveData").html("");
Unfortunately, it does result in a "flicker" each time you reload. To reduce this, in cases where you have a fixed number of rows, you can label each row 1-X (and use the same number for the cells in each row) and then simply overwrite the contents of each cell on each row as you update...
In my view, if you aren't worried about the order that the stocks appear, you should use a table and give id's to the cells that relate to each stocks price and change (e.g. for Apple the cell ids could be: price_NASDAQ:AAPL, change_NASDAQ:AAPL). You then simply use $("#price_NASDAQ:AAPL").html(...) to update the price and $("#change_NASDAQ:AAPL").html(...) to update the change.
If you want something to happen (like a flash) use $("#price").css("background-color", "...") to change the color and use setInterval(...) to wait for a short time before changing the color back...

Storing post display order in database

I am developing a web application which will have images displayed in a slider. It is important that I am able to modify the order that they are displayed in.
Currently, I have a column in the table of images called 'order', which must be set to ensure the ordering works correctly, but changing it requires changing every other, too, which becomes tricky when dealing with hundreds of records.
This table, as well as queries for modifying it, are in development, so it's completely fine to change the way I do this.
My questions are:
When I'm inserting a new row, how can I make sure it appears at the end of the list? Auto-Increment in SQL tends to leave gaps if you delete entries from the table. How do I make sure that the row is assigned an order 1 greater than the highest order in the table?
How do I reorder the table? Imagine that I use a drag and drop interface (or similar) to reorder one image, bringing it to the top, or a different part of the list. If I do that, I need to reset the numbering of every item, which is, again, inefficient when dealing with hundreds of rows.
How do I prevent two rows from having the same order at any given time? The UNIQUE flag on the column? Presumably if I set that flag, changing the order from, say, 8 in one row opens up another to use that number. Right?
Thank you for your time, and I hope this isn't too vague a question to be easily answered!
Query the table you are about to insert into to find the MAX id in the table. Then on your insert just do this +1.
When re-ordering, say you want to set image order 6 to order 3. You will want to update all rows from order 3 and onwards to order+1 then set the image to order 3.
UPDATE table SET id = id+1 WHERE id IN (SELECT * FROM table where id >= 3)
If you are using unique on the order column to re-order you will have to update the current value to a temp value such as 99999, then use method in 2. However method 2 should keep this table from receiving any duplicated values.
sidenote
You could on delete of a picture re-evaluate the ids to keep no gaps
UPDATE table SET id = id-1 WHERE id IN (SELECT * from TABLE WHERE id > 3)
Where 3 is the deleted id
It will be in the end of the list. Just use auto increment feature and do not set ID manually (like lastID + 1) and you'll never have described problem.
You can allow user to change order of the list and then just update all order cells (for each member of the list). Or you can use Ajax and exchange order value for two members every time user drag-and-drops.
Use one of approaches described in 2 and you'll never have this problem.

Is it possible to assign borders to an html table dynamically using CSS and the td value of the cell only?

I have data coming in from a database that is loaded into an html table. Because of this, I can't easily add different classes and id's to td's.
So I have a table of values in a table, call it table 1. Then I have another set of values in a separate query that have the values of each "group". This is loaded into an html variable which is loaded into a non-displaying table, call this table 2. The group values in table 2 are what I want to use to assign the new borders in table 1 with. The values in table 1 don't matter.
So essentially, I want to use table 2 values to assign the borders on table 1. The values in table 2 are like this (I'd prefer not to change these if possible):
0 1.1 1.2 1.3 2.1 2.2 2.3 3.1
I would assign each group number (1.1 for example) with a certain border style which would apply to the other table.
I'm not too savvy with all of this stuff yet so often times I don't know if what I want to do is possible or not. So please let me know if you have any ideas or if you think it's just not going to happen.
I'm able to incorporate javascript, jquery, sql, css and html elements, but this runs on a local machine so no php, etc. The data comes from a database so if there is a trick to applying something through sql keep that idea in mind.
Here is an old fiddle showing the "table 1" loaded using html table strings as variables (instead of originating from sql). This is not how it currently works, but it shows what it looks like.
Sample fiddle Slide the sliders and the data will appear.
The table 1 has a bunch of values in it. I will load another table, table 2, that will have the group values in it and I want to apply this to the table 1.
Thanks for the assist!
since html doesn't use variables, I believe you mean javascript variables.
let us call the variable you will store your "group" in group.
var group = document.getElementById('table2').value
if you want to base your border color for table1 on the value stored in a field of table2, try something like the following switch(case) statement. Obviously, you will substitute the actual div id you are referencing in table2 and the actual div id you assign to your table1. This is just an overview you can use as a template. For instance, if you want to change the border width, instead of color, your code blocks would be document.getElementById('table1').style.borderWidth = "thick"; etc.
switch(group){
case 0:
document.getElementById('table1').style.borderColor = "red";
break;
case 1.1:
document.getElementById('table1').style.borderColor = "blue";
break;
case 1.2:
document.getElementById('table1').style.borderColor = "yellow";
default:
document.getElementById('table1').style.borderColor = "black";
}

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.

Categories

Resources