DataTables v1.10 sorting by hidden column - datatables-1.10

After migrating to v1.10 sorting by hidden column stopped working.
Fiddler Example
v1.10
http://jsfiddle.net/0rstgd4f/
var dataTableInfo = $("#dataTable1").DataTable(
{
"initComplete": function(settings, json)
{
settings.aoColumns[0].iDataSort = 1;
}
});
<table id="dataTable1">
<thead>
<tr>
<th>
Column1
</th>
<th style="display:none;">
Column2
</th>
<th>
Column3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td style="display:none;">
1
</td>
<td>
a
</td>
</tr>
<tr>
<td>
2
</td>
<td style="display:none;">
2
</td>
<td>
b
</td>
</tr>
<tr>
<td>
3
</td>
<td style="display:none;">
1
</td>
<td>
c
</td>
</tr>
</tbody>
</table>
v.1.8.2
http://jsfiddle.net/rzzrbwb0/
Columns should be sorted as:
1
3
2
or
2
1
3
I tried to use new definition for initComplete as columns(), column() and so on but it did not work.
Any ideas and suggestions are welcome.

I don't think initComlete is the correct place to change DataTables behavior, at least for 1.10. From the manual:
DataTables stores the configuration and data for each table in a
settings object. The structure of this object is considered to be
private in terms of the DataTables API and reading or writing to the
values in the object is not supported. The property names and values
contained within the object can, will and do change between versions!
If you're using DataTables 1.10, it should be defined using columns.orderData or columnDefs.orderData, see the example below:
var dataTableInfo = $("#dataTable1").DataTable({
"columnDefs": [
{ "orderData": 1, "targets": [ 0 ] }
]
});
See this JSFiddle for demonstration.

Related

How to bind table values using data-ng-start and end conditions in AngularJs

I need to bind data with row values to a table, when i'm using the data-ng-repeat-start and data-ng-repeat-end data is not binding correct format.
<table id="tbl">
<tbody>
<tr data-ng-repeat="data in RDetails" data-ng-if="Values(data)">
<td data-ng-repeat-start="d in data.Dtls" data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-repeat-end="d in data.Dtls" data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>
when I use the above condition table showing the same values how can i do this. Where i did mistake please help me on this Please see image here i am getting repeated values.
If I understand your problem correctly - just presenting content of every RDetails.Dtls element as a table row - here is solution:
<table id="tbl">
<tbody data-ng-repeat="data in RDetails">
<tr data-ng-repeat="d in data.Dtls" data-ng-if="Values(data)">
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.V}}</span>
</td>
<td data-ng-if="d.IsQStart && ValuesBL(d)">
<span>{{d.VP}}</span>
</td>
<td data-ng-if="ShowValuesBL(d)">
<span>{{d.AV}}</span>
</td>
<td data-ng-if="Values(d)">
<span>{{d.AVP}}</span>
</td>
</tr>
</tbody>
</table>

Using ng-repeat to get the column names of a table

I'm trying to generate a table using angularjs. The code is as follows
Code:
<table>
<thead>
<tr>
<th>Column Name1</th>
<th>Column Name2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Items">
<th>{{Items[$index].Age}}</th>
<th>{{Items[$index].School}}</th>
</tr>
</tbody>
</table>
Here what I want to do is that, when age and school data is generated in the table, they should go under a person's name and that name should appear in the column. How can I do this?
If I have an $scope array as follows;
$scope.Items = [{Name:Jhon,Age:23, School: 'some school'}....];
I want the colum name to be Jhon and Below that I want the other 2 data
You are repeating through the array of Items where each object (in your case 'item') have a Age and School property for example:
var Items = [{Age:23, School: 'some school'}....];
this part is wrong:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{Items[$index].Age}}
</th>
<th>
{{Items[$index].School}}
</th>
</tbody>
it should be:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{item.Age}}
</th>
<th>
{{item.School}}
</th>
</tbody>
Look at the snippet below, that illustrates how to achieve the Age and School under the Name:
<tr ng-repeat="item in Items">
<td>
<table>
<thead>
<tr>
<th colspan="2">{{item.Name}}</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><i>Age:</i> {{item.Age}}</td>
<td align="center"><i>School:</i> {{item.School}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
Watch the demo here.

ng-repeat ($last) element with ng-if

var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>

angularjs pagination using smart table

By using angular smart table, how do i get the result set by using offset value.
For example, I have 100 records in the database
First i need to get 20 records from database and to display only 10 items per page.
After clicking the 3rd page, need to query the database(service call) and get the another 20 records..etc(but no server call for 2nd page)
I am using smart table pipe/ajax plugin to display the records.
How to achieve using this.
<div class="table-container" ng-controller="pipeCtrl as mc">
<table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
<thead>
<tr>
<th st-sort="id">id</th>
<th st-sort-default="reverse" st-sort="name">name</th>
<th st-sort="age">age</th>
<th st-sort="saved">saved people</th>
</tr>
<tr>
<th><input st-search="id"/></th>
<th><input st-search="name"/></th>
<th><input st-search="age"/></th>
<th><input st-search="saved"/></th>
</tr>
</thead>
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.saved}}</td>
</tr>
</tbody>
<tbody ng-show="mc.isLoading">
<tr>
<td colspan="4" class="text-center"><div class="loading-indicator"></div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="5" colspan="4">
</td>
</tr>
</tfoot>
</table>
</div>
http://lorenzofox3.github.io/smart-table-website/
code in the Plunker
http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
You need to add st-safe-src="tablecollection" as well as st-table=tablerow
Then,
<tr ng-repeat="row in tablerow">
FMI,
source: Client side pagination not working in smart table
Set the page size to 10.
Maintain a service level array object (var fetchedData) for the fetched rows from the server.
Only call the server if the required amount of data not available in the client side.
Always filter the data for the pagination from fetchedData.
Something like this in your service.
var fetchedData = [];
function getPage(start, number, params) {
if (fetchedData.length < (start + number)) {
//get the next 20 rows from the server and add to fetchedData;
}
var filtered = params.search.predicateObject ?
$filter('filter')(fetchedData, params.search.predicateObject) :
fetchedData;
//rest of the logic

Formatting a table, 2 arrays using ng-repeat

I have a problem when trying to format a table created with two arrays using ng-repeat. I have the two arrays; game.Teams[0].Scores and game.Teams[1].Scores, and the following html:
<table>
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in game.Teams[0].Scores">
<td>
{{score.ExtraPoints}}
</td>
<td>
????
</td>
</tr>
</table>
I want to loop over both lists and fill the second column with items from the second list. Is this achievable with ng-repeat, or will I have to merge the two and loop over a combined list?
Assuming both teams have the same amount of items
<table ng-init="scores = game.Teams[0].Scores.length > game.Teams[1].Scores.length ? game.Teams[0].Scores : game.Teams[1].Scores">
<tr>
<th>
Team 0 Scores
</th>
<th>
Team 1 Scores
</th>
</tr>
<tr ng-repeat="score in scores">
<td>
{{game.Teams[0].Scores[$index].ExtraPoints}}
</td>
<td>
{{game.Teams[1].Scores[$index].ExtraPoints}}
</td>
</tr>
</table>
Note: you can do that ngInit part in the controller, just showing how it can be done all in the view.

Resources