I'm using dir-paginate directive in my html and it is working fine when I apply it body of my page, but if I use this directive inside a popup window then the pagination always show 10 pages even if my data is of two pages. Below is my code
<table class="table table-bordered table-striped exectable" >
<tr>
<th>Category</th>
<th>Operation Type</th>
<th>Identifier</th>
<th>Field Name</th>
<th>Old Value</th>
<th>New Value</th>
<th><input type="checkbox" style="margin-right:5px;" id="executeAll" name="executeAll"/>Select</th>
</tr>
<tr dir-paginate="item in items|itemsPerPage:50">
<td>{{item.Category}}</td>
<td>{{item.OperationType}}</td>
<td>{{item.Identifier}}</td>
<td>{{item.FieldName}}</td>
<td>{{item.OldValue}}</td>
<td>{{item.NewValue}}</td>
<td><input type="checkbox" name="{{item.Category}}"></td>
</tr>
</table>
<dir-pagination-controls
max-size="50"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
Please let me know if I'm missing anything.
Related
I want to create a table with datatables and DOTNET MVC. How Can I create a row above the header that contains every select tag each column so I can filter the data? it looks like the image below
<table id="orderTable" class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Customer </th>
<th>Order date</th>
<th>Phone Number</th>
<th>Dish</th>
<th>Delivery Address</th>
<th>Message</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model.Orders)
{
<tr>
<td>#order.OrderId</td>
<td>#order.CustomerName</td>
<td>#order.OrderDate</td>
<td>#order.PhoneNumber</td>
<td>#order.Dish</td>
<td>#order.DeliveryAddress</td>
<td>#order.Message</td>
</tr>
}
</tbody>
</table>
I have a table on my page and it looks something like this:
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product name</th>
<th>Product description</th>
<th>Price</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr style="height: 50px;">
<td>1</td>
<td>Mug</td>
<td>Perfect for drinking stuff</td>
<td>41</td>
<td><i class="glyphicon glyphicon-info-sign"></i></td>
</tr>
etc....
</body>
I'm trying to write some javascript code to access the 'a' tag and the href attribute. I can't give it an id to easily access it so I am trying to access it via the following:
var btn = document.getElementsByTagName("tbody")[0].getElementsByTagName("a")[0];
console.log(btn.href);
However, I get the following error: btn is undefined.
If I try to print out the tbody element it is returning an object so I'm not sure why this isn't working for its child tag.
I should note that this JavaScript is being executed in the window.onload function.
For this particular case is better to use document.querySelectorAll():
var btn = document.querySelectorAll("tbody a")[0];
console.log(btn.href);
Example:
var btn = document.querySelectorAll("tbody a")[0];
console.log(btn.href);
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Product name</th>
<th>Product description</th>
<th>Price</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr style="height: 50px;">
<td>1</td>
<td>Mug</td>
<td>Perfect for drinking stuff</td>
<td>41</td>
<td><i class="glyphicon glyphicon-info-sign"></i></td>
</tr>
</tbody>
</table>
I'm trying to implement Footable, a JQuery plugin used to make tables responsive. There is an add-on for Footable to add pagination. [Demo]
And (http://fooplugins.com/footable/demos/paging.htm) for using the pagination add-on. I tried following this demo but my pagination came up as a vertical un-ordered list. The buttons are functional but unsightly. Here is a link images which i can not post here because my repuation is not high enough.
Here is my code for the table:
<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
<thead>
<th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
<th>Submission Time</th>
</thead>
<tbody>
<tr ng-repeat="(key, response) in formResponses">
<td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
<td>{{response.submission_time}}</td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td colspan="5">
<div class="pagination pagination-centered"></div>
</td>
</tr>
</tfoot>
</table>
Your footer should look something like this:
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="5" class="text-center">
<ul class="pagination">
</ul>
</td>
</tr>
</tfoot>
You can tell, that's different that what it says in the demo. This link showed me the difference https://github.com/bradvin/FooTable/issues/136.
Here's a plunk to demonstrate the issue: http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM
You need to add both attribute for pagination:
data-page-navigation=".pagination" data-page-size="2" into table tag
(If not placing the pagination in the table footer) Don't use a CSS class for table-to-pagination relationships. Use CSS ID instead.
Consider the following...
BAD - Example using CSS class to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
The footable javascript code will see two pagination objects. Which will be used by table1 and which will be used by table2 is not deterministic. This throws the footable javascript into a tizzy.
Rather than use CSS classes, be more specific by using a CSS ID instead.
GOOD - Example using CSS ID to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation="#pagination1" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination1" class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation="#pagination2" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination2" class="pagination hide-if-no-paging"></div>
Javascript Example:
$(document).ready(function () {
$(".footable").footable();
});
I have a table populated with Angular.js data:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in tabledata">
<td>00{{t.id}}</td>
<td>{{t.firstName}}</td>
<td>{{t.lastName}}</td>
<td>{{t.userName}}</td>
</tr>
</tbody>
</table>
What I would like to do is add another class to the table tag if the number of rows of data > 10.
Is this possible, and how would I go about it? I know how to do this with a "flat" table in jQuery, but I'm new to the dynamic repeaters of Angular.
Use ng-class
<table ng-class="{'newClassName' : tabledata.length > 10 }">
I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?
Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');
ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!
try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
DEMO