We Keep Coding

Tabulator - is there a way to print just selected rows

I'm using the Tabulator javascript table:
http://tabulator.info/docs/4.3/print
Is there a way to just print selected rows:
var table = new Tabulator("#example-table", {
printAsHtml:true, //enable html table printing
printVisibleRows:false, // print all rows in the table
});
What i am looking for is an option like "printSelectedRows: true) or some sort of work-around i can use to accomplish this.

There is no such option. One work around I can think of is a filter that results in only the rows you want being visible and not using printVisibleRows:false. Then only those rows would print. This of course depends on the row selection having some common element. For ad-hoc selection work around's I can think of are:
1) Moveable rows:
http://tabulator.info/docs/4.3/move#rows
Move the rows you want to the visible part of the table.
2) Move between tables:
Move rows to another table for printing.
http://tabulator.info/docs/4.3/move#rows-table

Protractor E2E Test - How can I get a Table Heading by its repeater?

Looking at this topic, I can get the information for a table heading by it's class/tags. However, for the table I have I would like to get mine using the repeater.
I know I can get the rows using element.all(by.repeater('row in myRows')) but that only seems to include the tr rows themselves, and not the heading (th) row.
How can I use by.repeater to get the row of headings?

One option would be to get one repeater row and use ancestor to get the table parent element. Then, you can get to the th header elements from there:
var rows = element.all(by.repeater('row in myRows'));
var table = rows.first().all(by.xpath("ancestor::table")).last();
var headers = table.all(by.tagName("th"));

HTML Radio button table need to build it dynamically

I was doing some re factoring for a page, In that page I have bunch of radio buttons group.Data for the radio buttons comes from database and sometimes from cache layer.
I will probably be having close to 100 radio buttons. I need to arrange them in 5 column 20 rows.
Data population happens via arraylist. I was thinking for converting this arraylist into json and then using it to lay out the radio buttons in the HTML table format.
I know there are many plugins out there for building tables,however they are not meeting my requirements.How do I built 5 rows 10 column table with my data on the fly.
Something like
<tr>
<td>radio1</td>
<td>radio2</td>
<td>radio10</td>
</tr>
<tr>
<td>radio11</td>
<td>radio12</td>
<td>radio20</td>
The caveat here is that I do not know in advance as how much data I m going to get for the table.
Appreciate some thoughts.

Loop through your JSON object.
Use mod ('%') to append a new tr every ten items
Output td items (with content) to the last tr added.
If you're using jQuery, try something like this:
var holderDiv = $('#myDivId');
var i = 0;
var myData = jQuery.parseJSON(response);
$.each(myData, function(key,value) {
if(i == 0 || i == i%10){
holderDiv.append('<tr>');
}
holderDiv.find('tr:last-child').append('<td>' + value + '</td>');
i++;
}

Making sure that an appended row is always the last row in a table that is made up of dynamically created rows. .detach()

I would like to append a row that should be the last row of the table. In my code it appears to work the first time a row is added dynamically. But It doesn't become the last row when other rows are added.
I always want the "subtot" row to be the last row but when I append other rows it doesn't change to be the last row. It stays where it is even though other rows are appended.
//make sure that subtot is only appended once
if($('.subtot').length < 1){
$('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>').insertAfter('table tbody>tr:last');
}
you have to scroll down the jsfiddle a bit to see the code.
Thank you

Every time you add new row to the table run following code.
$('table').find('.subtot').detach().appendTo('table');
replace 'table' with any selector that identify table element. What it does is it will remove subtot row from table and append it back to the table. By that you can always be sure that subtot is always the last row.

To insert a whole new row, but you have to remember the implicitly inserted <tbody element
So how about
$('.tableClass > tbody').append('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>');
to keep it sticky at the bottom, after adding any other rows run
$('.tableClass').find('.subtot').detach();
$('.tableClass > tbody').append('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>');

Counting how many rows are added to table via javascript

So im building a table in which the client is allowed to add more rows inorder to add more data to the table.
How can i count the total number of rows that is added to the table?
here is the example which for whatever reason doesn't actually work on jsfiddle, but just to get an idea of the functionality.
http://jsfiddle.net/ScEzz/1/
so say the user adds 5 rows 3 times and 15 rows once, the result should be (5*3)15+15 +original 1 = 31

You should be able to keep track in your code, but aside from that, you can do this...
var count = document.getElementbyId("mytable").rows.length;
Or with jQuery if you want...
var count = $("#mytable > tr").length;

$("#mytable tr").length-1
This gets you teh number of trs minus 1 for the header.
Since you're already using jQuery, you can make the code a cleaner by doing some things in jQuery instead of JS.
Select elements with $('#mytable');
Create an element with just a begin tag in jQuery: var row = $('<tr>');
Use jQuery's append method table.append(row);