Develop Reference

Permanently reverse the order of a DataTable in jQuery?

Let's say I have a Data Table like so:
<table id="history" class="display">
<thead>
<th>Player</th>
<th>Word</th>
<th>Value</th>
<th>Message</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
I have a function that receives a payload from the server and adds a row to the datatable with the relevant information
var history_data_table = $('#history').DataTable({
"pageLength": 5,
"searching": false,
"bLengthChange": false,
"language": {
"emptyTable": "Words that you discover will appear here."
}
});
function liveRecv(word_payload) {
history_data_table.row.add([word_payload.id_in_group,
word_payload.word,
word_payload.word_value,
word_payload.message]
).draw();
Naturally, this will add the row to the end of a paginated table. This table is a list of transactions in a game, and I want to present the most recent transactions to the user, such that every row that's added is added to the top of the data-table. What is the easiest way to achieve this?

You could try this method using jQuery
$('#history tr:first').after("<tr role="row"><td></td><td>add you own row</td></tr>");
or you could use DataTables inner function to access the array of rows
var history_data_table = $('#history').dataTable();
var DisplayMaster = history_data_table.fnSettings()['aiDisplayMaster'];
var tableapi = history_data_table.api();
var getlastrow = DisplayMaster.pop();
DisplayMaster.unshift(getlastrow);
tableapi.draw(false);

orderBy not working with pagination and filters

<table>
<thead>
<tr>
<th class="col-md-3" ng-click="sortDirection = !sortDirection">Created At</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="food in foods | filter:foodFilter | itemsPerPage:pageSize | orderBy:'created_at_date'">
<td class="col-md-"> {{food.created_at_date}} </td>
</tbody>
</table>
<dir-pagination-controls
max-size= 7
boundary-links="true">
</dir-pagination-controls>
This is only a snippet of my code but its too large to put up. Everything is working except only some of the created_at_date is in order. When I click on a different filter to add in or remove data depending on that filter, only some of it is entered into the correct place. My main question is: is there someway to sort all of the dates properly while still allowing the everything else function as well? All help is welcome, Thanks
(function () {
"use strict";
App.controller('foodsController', ['$scope'],
function($scope) {
$scope.sortDirection = true;

In your controller you can add the method to order the array before you loop over them.
Assuming your foods array has an array of objects, each with a key of created_at_date and a value:
App.controller('foodsController', function($scope) {
$scope.foods = [{
created_at_date: 6791234
}, {
created_at_date: 9837245
}, {
created_at_date: 1234755
}];
// create a method exposed to the scope for your template.
$scope.orderBy = function(key, array) {
// now you've received the array, you can sort it on the key in question.
var sorted = array.sort(function(a, b) {
return a[key] - b[key];
});
return sorted;
}
});
Now on your template, you have a method available to sort your values for you:
<table>
<thead>
<tr>
<th class="col-md-3" ng-click="sortDirection = !sortDirection">Created At</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="food in orderBy('created_at_date', foods) | filter:foodFilter | itemsPerPage:pageSize">
<td class="col-md-"> {{food.created_at_date}} </td>
</tr>
</tbody>
</table>
The orderBy method which we've created on your controller returns an array, but it's just sorted by the key that's sent in as the first argument of the function. The second argument is the original array you're trying to sort.
At least this way you can check if you remove all your other filters to see if it's ordered correctly, if then after you add them back in it changes it's because those filters are also changing the order.

Rivets.js rv-show not working with rv-each

I am new to Rivets.js. Given this code:
<div id="main">
<div>
<button rv-on-click="toggle">
Toggle
</button>
</div>
<div>
Dynamic headers sould be visible: {showDynamicHeaders}
</div>
<table>
<thead>
<tr>
<th>Fixed header</th>
<th>Fixed header</th>
<th rv-show="showDynamicHeaders" rv-each-item="items">
{item.name}
</th>
</tr>
</thead>
</table>
</div>
var rvcontext = {};
var rview = rivets.bind($("#main"), rvcontext);
rvcontext.showDynamicHeaders = true;
rvcontext.items = [
{
name : "Dynamic header 1"
},{
name : "Dynamic header 2"
},{
name : "Dynamic header 3"
}
];
rvcontext.toggle = function(){
rvcontext.showDynamicHeaders = !rvcontext.showDynamicHeaders;
}
I'd expect the table's dynamic headers to show up or not depending on the value of showDynamicHeaders. But it doesn't seem to work; instead, the headers are visible or not depending on the initial value of showDynamicHeaders, but their visibility doesn't change when the value is updated.
See this fiddle for a live example.
I am doing something wrong?

Try moving your rv-show to the <table> tag, like this:
<table rv-show="showTable" >
<tbody>
<tr rv-each-item="items">
<td>{item.name}</td>
</tr>
<tbody>
</table>
working fiddle
Edit: Another option would be to add a rv-class tag in the each, like this:
<div rv-each-i="data" rv-class-hide="i.a | neq 1">
{i.a} - {i.b} ({i.c})
</div>
javascript:
var data = [
{a:1, b:"testing1", c:true},
{a:1, b:"testing1a", c:true},
{a:1, b:"testing1b", c:true},
{a:2, b:"testing2", c:false},
{a:2, b:"testing2a", c:true},
{a:50, b:"testing50", c:false}
];
rivets.formatters.neq = function(val, v2) { return val!=v2;};
$(document).ready(function() {
var $r = $('#rivets');
rivets.bind($r, {data:data});
});
working fiddle of the rv-class method

Although not related to your problem I found this question whilst searching for rv-show not working within an array loop - turns out the rv-show binding needs either boolean or integer values passed to it. "0" or "1" always evaluate to true, so in my case I just cast the data to an integer and it worked as intended.
Just added that in case someone else stumbles over this question with the same cause as me, especially if dealing with AJAX data.

AngularJS - Ng-Table won't parse headers

Using Ng-table, I have tried to create one table view, that could be controlled from AngularJS parameters.
To control the header text, I need to put it in data-title or ng-data-title (Example: data-title="'Test'")
But, it always makes the table header empty.
Instead of filling it:
Code Snippet:
<td ng-repeat="v in tableSettings.data" data-title="v.name">
{{v.data?v.data(row):row[v.id]}}
</td>
Full Code:
<table ng-table="table" class="table" show-filter="{{tableSettings.filter}}">
<tr ng-repeat="row in $data">
<td ng-repeat="v in tableSettings.data" ng-click="tableSettings.click(row)" ng-attr-data-title="'{{v.name}}'"
ng-if="v.type!='switch'"
sortable="'{{sortable?sortable:v.id}}'">
{{v.data?v.data(row):row[v.id]}}
</td>
</tr>
</table
When I try to parse Angular into it, I just get errors: (press to see the errors)
"'{{v.name}}'" "{{v.name}}"
Is there a way to fix it, or even to parse it manualy from AngularJS?

Ok the problem is that the data-title attribute is meant to be used with static text (well known columns) such as data-title="'My first column'"
If what you need is dynamic columns you got to use the ng-table-dynamic directive.
For example:
<table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-striped">
<tr ng-repeat="row in $data track by row.id">
<td ng-repeat="col in $columns">{{::row[col.field]}}</td>
</tr>
</table>
Take notice in the directive declaration uses a special syntax tablePrams with cols. Here the cols is a $scope variable that must follow the following schema for this to work properly.
$scope.cols = [
{ title: 'ID', field: 'id', filter: { id : 'text' }, show: true, sortable: 'id' },
{ title: 'Installation', field: 'installationAt' },
...
];
Title and field are mandatory whereas filter, show, sortable depend on your usage scenario.
You can play around with this code pen

Applying fnFilter to a modified table

Using DataTables 1.9.4 and JQuery 1.4.4.
I'm trying to create a table which filters certain rows based on the visible column. The table is driven by an AngularJS like in-house controller.
When the table is displayed, the filter works fine, but thereafter, if the value changes, the filter is not updated.
The controller consists of an array (one for each row). When the table is updated through it, the filter is not reapplied. How can I make the filter reevaluate each row when the data changes?
HTML as generated by controller:
<table id="table-status">
<thead>
<tr>
<th>visible</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name1</td>
<td>1</td>
</tr>
<tr>
<td>0</td>
<td>name2</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>name3</td>
<td>3</td>
</tr>
</tbody>
</table>
The DataTables initialization:
var oTable = $("#table-status").dataTable( {
"aoColumnDefs": [ { "bVisible": false, "aTargets": [ 0 ] },
{ "bVisible": true, "aTargets": [ 1 ] },
{ "bVisible": true, "aTargets": [ 2 ] } ],
"bSort": false,
"bFilter": true
} );
oTable.fnFilter("1", 0, false, false, false, false);

I'm not entirely sure if this is what you need, but I rolled my own function to display or not some rows, based on a column called Status.
I have a checkbox that can contain the values 0, 1, 2 and 3.
First, I get the regex function associating the values I want to filter:
var filter = "^" + $("#filterStatusCheck option:selected").map(function() {
return this.value;
}).get().join("|") + "$";
Which returns, for instance, ^1|2$, meaning I want to filter the values 1 and 2.
Then, I search() the DataTable, looking for those elements (not me, actually, but rather their search() method.
var t = s.getTable().DataTable();
t.column(8).search(filter, true, false).draw();
Here, on column with the index of 8, I'm doing so that it searches, using the above filter, and then draw() the DataTable again.
In your case, you might want to figure out what event you can attach the above code (maybe right after the row has been updated?). Your filter would be 1 (visible, right?), whereas your column search would be 0 (the first column called visible).
Hope it helps.