I have two tables on an angular page, both with clickable headers for sorting. Somehow, clicking headers in either table sorts BOTH tables, even though they have different column names, and different 'orderByField' variables.
First Table:
<table class="table table-striped table-bordered table-hover" style="width: 100%;">
<thead>
<tr>
<th class="clickable colored_text span7 textLeft" ng-click="flagOrderByField='FlagName'; reverseSort = !reverseSort">Flag Name</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='DateAdded'; reverseSort = !reverseSort">Date Added</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='Expires'; reverseSort = !reverseSort">Expires</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="flag in FlagList | orderBy:flagOrderByField:reverseSort" style="border-top: 1px dashed rgb(200, 200, 200);">
<td ng-class="flag.SystemFlag ? 'text-error' : 'text-success'">{{::flag.FlagName}}</td>
<td>{{::flag.DateAdded | date:'MM/dd/yyyy' }}</td>
<td>{{::flag.Expires | date:'MM/dd/yyyy' }}</td>
</tr>
</tbody>
</table>
Second Table:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="clickable colored_text" ng-click="orderByField='CourseNumber'; reverseSort = !reverseSort">Course #</th>
<th class="clickable colored_text" ng-click="orderByField='ClassName'; reverseSort = !reverseSort">Course Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="class in classes | orderBy:orderByField:reverseSort | startAt:(currentPage-1)*pageSize | limitTo:pageSize">
<td>{{::class.CourseNumber }}</td>
<td>{{::class.ClassName }}</td>
</tr>
</tbody>
</table>
How can I get these two tables to sort separately? (This page also has a bunch of other tables, in tabs that load on tab-click, that all share this same strange behavior.)
Aha - In a bit of quick intuiting, I noted that both tables used the same 'reverseSort' variable. I changed it for the first table to 'flagReverseSort', and set the default in the controllers.js to false; voila! it works as it should. So not only do the tables need their own orderBy variable, but they need their own, unique, reverseSort variable.
Related
{% raw %}
<table class="table table-striped table-bordered row" id="compare-table" style = "table-layout: fixed; margin-right: auto; margin-left: auto">
<thead>
<th class = "col-md-3 tableHeading">Configuration name</th>
<th class = "col-md-3 tableHeading">Property Name</th>
<th class = "col-md-3 tableHeading">Value 1</th>
<th class = "col-md-3 tableHeading">Value 2 </th>
</thead>
<tbody>
{{#each tableRows }}
{{#each values}}
<tr>
{{#if #first}}
<th class="breakWord inlineHeading" rowspan={{../length}}>{{ ../pid }}</th>
{{/if}}
<td class="breakWord">{{ propName }}</td>
<td class="breakWord">{{ propValueA }}</td>
<td class="breakWord">{{ propValueB }}</td>
</tr>
{{/each}}
{{/each}}
</tbody>
</table>
{% endraw %}
I have to render a table dynamically after ajax request and want to group rows by cofiguration-name. When I use rowspan in Data Table only simple table is rendered and there is a console error:
jquery.dataTables.min.js:24 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
I am using handlebars.js for populating Table-Template
DATATABLE:
https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js">
Is there a way to generate table in this format while keeping Datatable features.
$(document).ready(function() {
var table = $('#example').DataTable({
'ajax': 'https://api.myjson.com/bins/qgcu',
'rowsGroup': [2]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" rel="stylesheet"/>
<h3>jQuery DataTables - ROWSPAN in table body TBODY</h3>
<hr><br>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
Use https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js external library and apply 'rowsGroup': [index_of_column] in datatable config.
I hope this helps you.
I'm trying to create a table with multiple rows and one of the rows containing repetitive column headers like below.
I'm not sure how to use ng-repeat in angularjs to create these headers. I tried putting ng-repeat in <tr> element which obviously won't work as it creates multiples rows.
I also tried putting it in a <th> element but the headers won't appear alternatively.
I want to use ng-repeat (to display Current and Prior headers) rather than manually typing them like in the code below because number of times the the repetitive columns appear is dynamic (dependent on row 1).
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{ year }}
</th>
</tr>
<tr>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>
There is ng-repeat start and end directive for this kind of situations:
angular.module("Test", []).controller("repetition",
function($scope)
{
$scope.years = function()
{
return [2017, 2018];
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="Test" ng-controller="repetition">
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<th ng-repeat-start="year in years()" id="{{year}}planning" style="background-color:#EEEEEE" scope="col" class="tsub-head">Current</th>
<th ng-repeat-end id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</tr>
</thead>
<tbody></tbody>
</table>
Everithing in between the tags containing ng-repeat-start and ng-repeat-end will be included in the repetition.
By the way the same exists for ng-if (ng-if-start/ng-if-end)
Looking for the picture you provided, the solution lies in wrapping "current" and "prior" <th> with a <div> with ng-repeat directive. Like this:
<thead>
<tr>
<th id="item" scope="colgroup" style="text-align:center" rowspan="2">Items</th>
<th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2">
{{year}}
</th>
</tr>
<tr>
<div ng-repeat="year in years()">
<th id="{{year}}planning" scope="col" class="tsub-head">Current</th>
<th id="{{year}}reporting" scope="col" class="tsub-head">Prior</th>
</div>
</tr>
</thead>
so I've got a ng-repeat with filters applied which works great! but when i load this there is nothing showing in the table. After I've applied the filters then the data shows and when I delete the filters aka the queries then all the data shows on the table.
So my question is how do I make the table show all the data aka the content and only apply the filters when I write in the inputs....
Thanks!
<div class="container" ng-controller="AppCtrl">
<h1>HearthDB</h1>
Class: <input ng-model="classQuery">
Cost: <input ng-model="costQuery">
</br>
Type "Spell/Minion": <input ng-model="typeQuery">
Secret: <input ng-model="secretQuery">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Cost</th>
<th>Text</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in data | filter:{playerClass: classQuery, cost: costQuery, type: typeQuery, text: secretQuery}" ng-if="content.collectible && content.cost">
<th>{{content.name}}</th>
<th>{{content.type}}</th>
<th>{{content.cost}}</th>
<th ng-bind-html="to_trusted(content.text)"></th>
<th>{{content.playerClass}}</th>
</tr>
</tbody>
</table>
</div>
Hey guys this is what i needed to solve my problem. hope this helps
<div class="container" ng-controller="AppCtrl">
<h1>HearthDB</h1>
Class: <input ng-model="classQuery.playerClass">
Cost: <input ng-model="costQuery.cost">
</br>
Type "Spell/Minion": <input ng-model="typeQuery.type">
Secret: <input ng-model="secretQuery.text">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Attack</th>
<th>Health</th>
<th>Type</th>
<th>Cost</th>
<th>Text</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in data | filter: classQuery | filter: costQuery | filter: typeQuery | filter: secretQuery" ng-if="content.collectible && content.cost">
<th>{{content.name}}</th>
<th>{{content.attack}}</th>
<th>{{content.health}}</th>
<th>{{content.type}}</th>
<th>{{content.cost}}</th>
<th ng-bind-html="to_trusted(content.text)"></th>
<th>{{content.playerClass}}</th>
</tr>
</tbody>
</table>
</div>
I have a following table of grouped items:
I want to display each item in dropdown rows under particular group. Would you mind to help how to make this with Angular JS?
I'm fetching all groups and items with a single JSON:
[
{"City":"NY",
"notes":"bla-bla",
"state":"Created",
,"description":"asdasdasda",
"locationId":1,
"waybillId":"",
"itemCount":3
"items":[{"itemId": "0001","status":"Created", "weight":23},
{"itemId": "0002","status":"Created", "weight":23}
{"itemId": "0003","status":"Created", "weight":23}
]
},
....
]
HTML:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>City</th>
<th>Waybill</th>
<th>Items</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="group in groupItems">
<td>{{$index+1}}</td>
<td>{{group.city}}</td>
<td>{{group.waybillId}}</td>
<td>{{group.itemCount}}</td>
<td>
<span class="label label-success">{{group.state}}</span>
</td>
<td>
<button class="">Ungroup</button>
</td>
</tr>
</tbody>
</table>
For level 1,
<tbody data-ng-repeat="storedata in storeDataModel.storedata"
data-ng-switch on="dayDataCollapse[$index]">
For level 2, i.e. the second tr
<tr data-ng-switch-when="true">, in which you have the second level ng-repeat.
Check out the fiddle http://jsfiddle.net/Pixic/VGgbq/ for nested accordion like table.
I'm making a series charting tool. For each series, I have 4 categories. I want the user to be able to choose any combination of series and category to plot.
To accomplish this, I created a bootstrap modal with a table of checkboxes for each series/category combination using Angular.js. It works, but I find the rendering of the modal too slow when there are too many series:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Series Name</th>
<th ng-repeat="col in cols">
{{ col }}
</th>
<th>select all</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(name, insts) in items"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>
</table>
Plunker demo of what I have: http://plnkr.co/edit/1zmZMpDsGwaKdyL7dFty?p=preview
I'm just learning Angular, so I'm not too sure how to speed this up, or if there is a smarter approach than using a big table of checkboxes.
the best way to speed up any ng-repeat is to use track by $index
<tr ng-repeat="(name, insts) in items track by $index"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts track by $index">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>