I'm trying to implement FooTable-2 in my project, but for some reason I can't get the pagination working.
I'm following THIS tutorial and here is what I have so far as a table code:
<div id="mainContent">
<div id="allTrackersDiv" style="display: none;">
<label><b>Active Trackers</b></label>
<table class="activeTrackersTable" id="allTrackersTable"
data-page-navigation=".pagination">
<thead>
<tr>
<th> ID </th>
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
</tr>
</thead>
<tbody data-bind="foreach: trackersObjArray">
<tr data-bind="click: test">
<td><span data-bind="text: tId"></span></td>
<td><span data-bind="text: tname"></span></td>
<td><span data-bind="text: pname"></span></td>
<td><span data-bind="text: tcreate"></span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="pagination"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
The problem is that the paging is not working. I have 22 records in my table and it is supposed to start paging after the 10th record
Here is how it looks:
What am I missing here? At my point of view everything looks pretty fine. What am I missing, I really can't understand my mistake.
You can try mentioning
data-page-size="10"
explicitly.
And if that doesn't work, may be issue is due to dynamic data being added to footable.
Use
$('#myTable').append(html).trigger('footable_redraw');
So that footable will be redrawed and size limit will be applied.
Reference links: Footable data page size not respected and
Other issues due to dynamic data in footable
Related
My HTML code:
<table>
<thead>
<th>
<td>Links</td>
</th>
</thead>
<tbody>
<tr>
<td>www.google.com</td>
</tr>
</tbody>
</table>
My JS:
$(document).ready(function(){
$('table').DataTable();
})
JS Fiddle: https://jsfiddle.net/paczbj35/
When I run it I get a "Requested unknown parameter '1' from the data source for row '0'" error.
Any ideas as to why?
Could be because your table structure is syntactically incorrect. <th> is the equivalent of a <td> tag, just for <thead>, but it can be used as a cell anywhere in your table. You are using it as if <th> means a row for the table header.
Your error message is also telling you exactly where the issue is... row 0 column 1
Try -
<table>
<thead>
<tr>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr>
<td>www.google.com</td>
</tr>
</tbody>
</table>
I have quite big table with many columns. Many columns have attribute "ng-show". Also i have created a functionality which hides or displays some table columns (with "ng-show").
When i trying to apply table columns visibility change ir takes 2-3 seconds for angular to update the table. Is it possible to add loading spinner on the table while it happens?
Simplified table structure:
<table class="classesList" id="tableId">
<thead>
<tr>
<th ng-show="tableColumns[0].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[1].show" >
<span>Header1</span>
</th>
<th ng-show="tableColumns[2].show" >
<span>Header1</span>
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-show="tableColumns[0].show">
<span>Data1</span>
</td>
<td ng-show="tableColumns[1].show">
<span>Data2</span>
</td>
<td ng-show="tableColumns[2].show">
<span>Data3</span>
</td>
...
</tr>
</tbody>
I have tried running the code below to no success please someone kindly help I cant see any error but its not sorting the Columns tried varies ways and did not work.
<table >
<thead>
<tr>
<th class="textalignleft" >Name</Name
</th>
<th class="textalignleft" ng-repeat="col in selcolumns" ng-class="selectedCls(col)" ng-click="changeSorting(col)" >{{selcolumns[$index]}}
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="person in ItemsByPage[currentPage] | orderBy:columnToOrder:reverse" data-ng-class-odd="'odd'" data-ng-class-even="'even'">
<td>
{{person.FirstName}} {{person.LastName}}
</td>
<td ng-repeat="col in selcolumns">
<span ng-switch on =col>
<span ng-switch-when="Email">{{person.Email}}</span>
<span ng-switch-when="MobileNumber">{{person.MobileNumber}}</span>
<span ng-switch-when="OfficeName">{{person.Firm}}</span>
<span ng-switch-when="OfficeFaxNumber">{{person.OfficeFaxNumber}}</span>
<span ng-switch-when="Functions"><span ng-repeat="Function in person.Functions"><span ng-if="$index > 0">;</span> {{Function.Function}}</span>
</span>
</span>
</td>
</tr>
<tbody>
</table>
I am trying to fetch data from mysql using php and trying to pass the data in json format to angularjs so that I can display data in table.
HTML code is:
<body ng-app="myModule">
<div class="row">
<div class="col-lg-12 text-center">
<div ng-controller="myController">
<table class="table">
<thead>
<tr>
<th>email</th>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.row -->
</div>
AngularJS code is:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope,$http) {
$http.post('http://enrolin.in/test/login.php')
.then(function(response){
$scope.employees=response.data;
}); });
Working php link that outputs json is : http://enrolin.in/test/login.php
Working link of table is http://enrolin.in/test/
But when I try to load the html. It does not load any data from the database.
I tried to view it in console, looks like ng-repeat is repeated 6 times that is exactly the number of rows in database that means data is imported but is not being displayed somehow
It is just a silly mistake in your view (can't believe I overlooked it at first).
You are just repeating empty rows now:
<tbody>
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tbody>
Those tds obviously need to be inside the repeated row:
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tr>
</tbody>
The problem seems to be in your HTML.
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
The <td> are outside the <tr>, so {{ employee }} does not exist in the <td>.
This should work :
<tr ng-repeat="employee in employees">
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tr>
I want to save the flight number to be able to access it in another html page using the controller and service
My code
<table class="headers">
<thead>
<tr>
<th> Choose Flight</th>
<th> Departs From</th>
<th> Destination</th>
<th> Departs </th>
<th> Flight Number </th>
<th > Price </th>
</tr>
</thead>
</div>
</td>
<tbody ng-repeat="flight in flights" >
<td>
<input type="radio" name="id">
</td>
<!-- <tr ng-repeat="Flight in Flights"> -->
<!-- <td>{{Flight.FlightNumber}}</td> -->
<td>{{flight.origin}}</td>
<td>{{flight.destination}}</td>
<td>{{flight.departureDate}}</td>
<td>{{flight.flightNumber}}</td>
<td>{{p}}</td>
<!-- </tr> -->
</tbody>
</table>
I suppose you using Angular 1 (is it true to Angular 2 anyway).
You have to bind value to your controller by using ng-model (using input). Then store it at your convenience (session, database...) and pass it to an other page.
There is documentation : https://docs.angularjs.org/api/ng/directive/ngModel