smart table using pagination angular - javascript

Using Angular smart table lib:
I just want to display the pagination buttons on the bottom. According to the documentation, it looks like st-pagination directives inserts those dom elements in there. However, for me, it is not working. Here is the plunker given by the smart table documentation:http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
Here is my table footer code:
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>
</tr>
</tfoot>
I must be misunderstanding something. I know you can put your own customized template for the pagination.
Here is a screenshot, of the output and debugger:

You should use <td> tag only. you should not use <div> tag.
OK
<td colspan="5" class="text-center" st-items-by-page="10" st-pagination="">
</td>
NG
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>

Related

Cycling through CSS Post classes in Tumblr

I am trying to style my {block:Photo} styles in Tumblr, so that each time a photo is posted, it will cycle through a selection of, for instance, 5 slightly different classes for displaying the picture.
An example of such can be found here (where each photo table has a unique max-width property): http://www.nontemporary.com/
The code I've come up with so far, having made ample use of the Chrome inspector is thus:
{block:Posts}
{block:Photo}
<li class="post photo">
<table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
<tbody>
<tr class="postspace">
<td></td>
</tr>
<tr class="postrow">
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
</tr>
</tbody>
</table>
</li>
{/block:Photo}
{/block:Posts}
Naturally, I think I'll have to create some custom classes for the widths, but my main question is really how I should go about getting Tumblr to cycle through those widths, as can be seen in the example.
Thanks!
If you want them to cycle through the classes in order (like the example does) you can utilise the fact that tumblr lets you style each number of post.
Here is an example of what you would do:
<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">
This would render as
<li class="post-1">
with the 1 depending on what number post it is.
From here you can easily make classes for .post-1 through to .post-15.
If you would like something random instead, javascript/jquery will be needed.

Stop FooTable from stripping html from <td> tags when converting cells

I'm using FooTable (http://fooplugins.github.io/FooTable/docs/getting-started.html) to create some dynamic tables from my static html tables.
Within the table's cells or tags are html to format the value in the cell. For example I use bootstraps label component in one cell.
The problem I'm having is that when the footable runs it converts all the html formating and seems to strip all these html tags from the cells and I'm just left with the text.
So for example I may have in one cell:
<td><span class="label label-default">Default</span></td>
Converts over to:
<td>Default</td>
My question is there an option to stop this from happening? I have search Google and on the footable documentation but I'm having no luck.
It seems that not a lot of people have had this problem. But surely someone knows if it is possible or not.
You can try to identify the columns as HTML, using data-type="html" in the column that has HTML.
Example:
<table id="testTable" class="table" data-paging="true">
<thead>
<tr>
<th style="width: 45%">Origin</th>
<th data-breakpoints="sm xs" style="width: 45%">Destination</th>
<th style="width: 5%" data-type="html"> </th>
</tr>
</thead>
<tbody>
<tr>
<td>O1</td>
<td>D1</td>
<td><span class="glyphicon glyphicon-remove"></span> <span class="glyphicon glyphicon-pencil"></span></td>
</tr>
<tr>
<td>O2</td>
<td>D2</td>
<td><span class="glyphicon glyphicon-remove"></span> <span class="glyphicon glyphicon-pencil"></span></td>
</tr>
<tr>
<td>O3</td>
<td>D3</td>
<td><span class="glyphicon glyphicon-remove"></span> <span class="glyphicon glyphicon-pencil"></span></td>
</tr>
</tbody>
</table>
Javascript:
$("#testTable").footable();
Have you tried creating your own formatter?
jQuery(function($){
$('.table').footable({
"columns": [{
"formatter": function(value){
return value;
}
}]
});
});
It seems a bit redundant, but it does have a default "type" formatter so perhaps just passing the value straight back without any additional uknown sorcery will fix the issue.

ng-repeat in table and conditional tr

I have a collection of elements of different types. I want to iterate them using ng-repeat, and conditionally draw the right tr per each type.
I can't use ng-repeat-start since I want to use virtual scrolling and none of the libraries I found supports the start/end concept.
Here is a jsfiddle: http://jsfiddle.net/mx6v8j98/1/, which doesn't work. here is the HTML part:
<div ng-app ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat="item in itemsList" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'">
<div ng-switch-when="true">
<td>{{item}} is even</td>
<td>even content</td>
</div>
<div ng-switch-default>
<td>{{item}} is odd</td>
<td>odd content</td>
</div>
</tr>
</tbody>
</table>
</div>
In my real world case, I have many td with complex content, so I don't want to use ng-if/ng-switch-when on each
Update: I can put the ng-repeat on the <tbody> tag, but that looks ugly and I'm not sure what the consequences are regarding styling
Update II: In my case, the 'tr' tag itself is rendered differently according to a condition
As stated in another answer, <div> is not allowed as a child element of <tr>.
You are clearly trying to use <div> as a logical container for ng-switch-when, but since ng-switch-when (and ng-switch-default) supports multi-element, you don't need this container:
<tr ng-repeat="item in items" ng-switch="$even">
<td ng-switch-when-start="true">{{item}} is even</td>
<td>even content 1</td>
<td>even content 2</td>
<td ng-switch-when-end>even content last</td>
<td ng-switch-default-start>{{item}} is odd</td>
<td>odd content 1</td>
<td>odd content 2</td>
<td ng-switch-default-end>odd content last</td>
</tr>
It seems you cannot put <DIV> within <TR> but before <TD>.
Solution 1: Put conditional expression in every <TD>.
<!-- TDs for even row -->
<td ng-if="$even">{{item}} is even</td>
<td ng-if="$even">even content</td>
<!-- TDs for odd row -->
<td ng-if="!$even">{{item}} is odd</td>
<td ng-if="!$even">odd content</td>
Solution 2: For fairly complex table structure, you'd consider create your own directive to represent row cells.

angular.js: A Table from nested data structure?

I have the following data structure: a list of courses, and for every course, a list of semesters. I need to build a table with a row for every semester of every course, and a column with the course's name which spans all the rows for that course.
I'm trying to use angular to generate the table, but because the data structure is nested I can't simply do ng-repeat in the tr tag. So I tried doing this:
<table border="1">
<div ng-repeat="course in data">
<tr>
<td rowspan="{{course.semesters.length}}">{{course.name}}/td>
</tr>
<tr ng-repeat="semester in course.semesters">
<td>{{semester.info}}</td>
</tr>
</div>
</table>
This utterly fails - the table is generated outside the repeated div. Seems to me I'm missing something basic about how ng-repeat works.
Try tbody instead of div:
<table border="1">
<tbody ng-repeat="course in data">
<tr>
<td rowspan="{{course.semesters.length}}">{{course.name}}/td>
</tr>
<tr ng-repeat="semester in course.semesters">
<td>{{semester.info}}</td>
</tr>
</tbody>
</table>

Drop Down Content/Table and Page Jumping

I am coding a page with several dynamic/sortable tables in it (one below another) to share PDF documents. Each Document tittle in the table contain a link to open the PDF in a new tab. Everything works fine, BUT when I scroll down the page and open a dynamic table/or minimize the table, the page jumps to top of the page/to default position. JavaScript's RETURN FALSE fixes this problem but all the links in the table are dead. Can anyone help to fix this? I attach the basic code structure here you can see what I am doing...
HTML:
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1>
<div>
<table class="sortable" width="100%" border="0">
<tr>
<td id="tablehead" width="55%">Sort by tittle</td>
<td id="tablehead" width="25%">Sort by Author</td>
<td id="tablehead" width="25%">Sort by date</td>
</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document1.pdf" target="_blank">Document1Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document2.pdf" target="_blank">Document2Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document3.pdf" target="_blank">Document3Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX<a></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
JAVASCRIPT:
// Dropdown Table Code
$(function(){
$('#droptable li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300); // If I add RETURN FALSE here the page doesn't jump to the default position/to the top of the page (when open or minimize the table) BUT links in the table are out and don't work anymore //
});
});
});
2 things
1st id's should be unique, so change all instances of
id="tabledata"
to
class="tabledata"
2nd, try to give you td's that contain the link a different class than those that have data, then attach slide toggle to that class, maybe like:
$('.newclass').each(function(){
.....
I didn't succeed with the hints you gave but thanks anyway! I did everything but page was still jumping when opening/closing the table. BUT...I was browsing different forums and found this simple answer.
Using "#/" instead of "#" and the page won't jump. Hmm.. sometimes the answer is too simple, seemingly :o
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1> ...
Rock'nRoll!

Categories

Resources