Grouping objects in HTML for Javascript Manipulation - javascript

I have not written the code yet, but wanted to know general direction. My entire front end consists of HTML tables. It actually has an excel look.
I was thinking of generating default pages and then using JS to shift entire rows and columns based on ids.
The table cells might contain - Label, Textboxes, Images, Checkboxes etc.
In what way should I address the row or with Javascript assemble a group of elements within the , tags. Do not want a solution with <div>
So if I write a <th> as
<th class="col1" colspan="1"><%= nodes.last == #map.keys.first ? label_tag("#{nodes.last.to_label}") : label_tag("#{nodes.last}") %></th>
I could give it an id, but then would selecting that elementbyId in JS cause for even the context of the row to be picked up

You can give every row an attribute contain Id number, then you can read this numbers in JQuery and Re-Sort your table.

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.

How to page a section that has multiple tables so that each page shows limited tables only in cshtml?

I have a search column which on searching shows multiple tables as results (by multiple I mean in 1000 or more) .
Problem - generated tables are shown in one page only, I want them to be shown in multiple pages for better readability. I also want to sort some columns of each table.
for example
in Views cshtml format I have something like this
<section class="someclass">
foreach(var item in something)
{
<table>
<tr>
<td>#item.a</td>
<td>#item.b</td>
</tr>
<tr>
<td>#item.c</td>
<td>#item.d</td>
</tr>
</table>
}
</section>
and the 'var' is generally very large in count so this code generates a lot of tables
any idea how I could do paging in this case
what I have tried :
well I have tried table sorter and i am confused how to implement that in a section..
apart from that I don't want to use server side options as I want keep the code in javascript only.

AngularJS repeat with table and Rowspan and filtering of elements

I want to create a html table that groups data using rowspan with ng-repeat.
The layout is working fine but I got a problem when I add filters to the table.
For example, when I filter the table by "Category" column with "STD" value it breaks the layout.
I have created this JsFiddle to show the issue.
Any recommended approach to manage this?
This is related with this question:
Best Regards.
I did not have much time to look on this, but is seems that your issue is here:
<tr ng-repeat-start="state in country.states | filter:{stateCode:stateCodeFilter}" ng-if="false"></tr>
<tr ng-repeat="city in filteredMappings = (state.cities | filter:{category:categoryCodeFilter})">
<th ng-if="$parent.$first && $first" rowspan="{{country.rowSpan}}">
{{country.countryCode}}
</th>
The $parent.$first is set to false in case of filter usage because $parent.$first is the first item in the not-filtered countries list but you never reach this one in the second repeater as it is removed by the filter. This leads to the first cell in the row being hidden and thus whole your table design is being deformed.
I do not have any quick solution on my mind right now, but I will take a look later if I find some time. Hope it helped you at least a bit.

Dynamic layout in JS/CSS/HTML

In my application users define documents layouts.
These layouts are logically tables most of the time, so users specify which "property" is going to be displayed in which cell. They also can define a number of rows and columns as well as how many rows or columns a property will take (collspan and rowspan in HTML terminology).
Now for a given document layout, and a set of documents I need to display it in browser.
I would like to do it on the client side, possibly using jQuery or/and Knockout.js, or some other framework/library.
Before I start reinventing the wheel, can someone point me in the right direction of doing it?
Not sure if this really counts as a question. It's quite open to interpretation but here goes.
Define your LayoutViewmodel with a set of multi-dimensional observableArrays. Each index in the multidimentional array corresponds to a Property object which holds the data about rowspan, colspan etc (not sure what data you need).
Display you layout with foreach bindings. You most likely have two of these, one for selection and one for display. Below is my attempt at the display one.
<table data-bind="foreach: rows">
<tr data-bind="foreach: columns">
<td data-bind="attr: { colspan: colspan, rowspan: rowspan }, text: name">
</td>
</tr>
</table>
Hope this helps.

Find the <th> of a clicked <td> in a table when <th> has span greater than 1

I'm trying to find a TD's associated TH cell, but am having trouble using JQuery's index() and eq() functions since the TH's in my table have spans of greater than one.
I know I can retrieve a TD's cellIndex property, but would I use this to find the TH? Or is there another more appropriate way?
Intended functionality is to click a cell and have it give me the name of the heading it's under. Code sample: http://jsfiddle.net/KyTDA/
If you want to find the corresponding table header given the index of a table cell you can use the following jQuery (this is assuming you already have the table cell's index):
var th = td.closest('table').find('th').eq($td.index());
Since you've edited your question and provided code, I'll provide another answer to this.
The markup you have posted isn't valid. You don't have any table rows, and if you're trying to nest table cells inside table headings, that isn't valid either. What are you trying to achieve in terms of layout? Try going to http://jsfiddle.net/ and create your markup and then provide a link and let me know when you have the layout you're trying to create.

Categories

Resources