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.
Related
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);
I am trying to display only 3 digits after decimal point but I'm unable to do so. I tried with toFixed() method but I couldn't succeed.
Here's my fiddle.
HTML source code:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>DATE</th>
<th>CODE</th>
<th>PRODUCT</th>
<th>QUANTITY</th>
<th>UNIT</th>
<th>VALUE</th>
<th>COUNTRY</th>
</tr>
</thead>
<tbody>
<tr>
<td>01/01/2017</td>
<td>84571001</td>
<td>MACHININGCENTRESHORIZONTAL</td>
<td>13</td>
<td>NOS</td>
<td>22.1382568</td>
<td>JAPAN</td>
</tr>
<tr>
<td>03/01/2017</td>
<td>84571001</td>
<td>MACHININGCENTRESHORIZONTAL</td>
<td>33</td>
<td>NOS</td>
<td>54.5104524</td>
<td>JAPAN</td>
</tr>
</tbody>
</table>
Can anyone help me out?
The easiest is to use the built-in number helper :
columnDefs: [{
targets: [5],
render: $.fn.dataTable.render.number(',', '.', 3)
}]
Updated fiddle -> http://jsfiddle.net/ebRXw/3627/ Just an example, follow the link for details about all the options you can use along with the number renderer.
you can define a custom renderer for one or multiple columns.
https://datatables.net/examples/advanced_init/column_render.html)
$('#example').DataTable({
responsive: true,
columnDefs: [{
targets: [5],
render(v){
return Number(v).toFixed(3)
}
}]
});
You could transform the cells' values before you apply DataTable.
Here is how you would do it, assuming the cells that need to be modified have the hi class.
$(document).ready(function() {
$('#example .hi').each(function() {
var num = $(this).html(); // get the content of the cell
num = parseFloat(num); // transform it to a JavaScript number
num = num.toFixed(3); // Limit the number of decimals to 3
$(this).html(num); // Update the HTML content
});
$('#example').DataTable({
responsive: true
});
});
I am using angular datatables and I have only one column.
When I bind it, the data comes in an ascneding order, while I want to display it in the order I recived it.
Can someone please help.
Controller :
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withButtons([
'print',
'pdfHtml5',
]);
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).notSortable()
];
HTML :
<div ng-controller="formViewController as frmView">
<table datatable="ng" dt-options="frmView.dtOptions" dt-column-defs="frmView.dtColumnDefs" class="row-border hover">
<thead>
<tr>
<td>
{{Title}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="plugin in newArray track by $index">
<td>
//Content
</td>
</tr>
</tbody>
</table>
</div>
Look at order, formerly known as aaSorting. Add
.withOption('order', [])
to your dtOptions. The default value of order is [[0, 'asc']], setting it to [] will prevent dataTables from making an initial sort on the first column after initialisation.
Resolved
this.dtOptions ={
ajax:{},
columns:[],
order:[] //<= Use this
}
This worked for me. I tried several other ways, but thus seems to be the better solution.
Try This
dtOptions: DataTables.Settings = {};
ngOnInit() {
// table settings
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
retrieve: true,
order:[[0, 'desc']] // '0' is the table column(1st column) and 'desc' is the sorting order
}
}
JS DataTables ColReorder results in unexpected behavior when using the API to re-order columns.
https://github.com/DataTables/ColReorder/
A first re-order works fine e.g.
tableColReorder.fnOrder([2, 1, 0]);
But this subsequent re-order should return columns to their original order but it doesn't. Why not?
tableColReorder.fnOrder([0, 1, 2]);
Simple fiddle example here:
http://jsfiddle.net/h7wdt72k/
$(document).ready(function () {
// Initialize data table extension.
var table = $('table')
.DataTable({
paging: false,
searching: false,
ordering: false,
bInfo: false
});
// Initialize column re-order extension.
tableColReorder = new $.fn.dataTable.ColReorder(table);
// Re-order columns. Switch first/last columns.
tableColReorder.fnOrder([2, 1, 0]);
// Re-order columns to original order 0, 1, 2. Does not work!?
tableColReorder.fnOrder([0, 1, 2]);
// Get current column order. Did not apply re-order directly above. Why not!?
alert(tableColReorder.fnOrder());
// This statement returns columns to original order 1, 2, 3. Works but why!?
//tableColReorder.fnOrder([2, 1, 0]);
});
html:
<table border="1">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Behavior is by design and not a bug.
//To switch position of two columns, always reorder based on array of consecutive integers (array length = number of columns).
//Even if columns already moved. Start with array of consecutive integers.
newColOrder = [0,1,2];
// Set new order of columns.
newColOrder[colTo] = colFrom; // colFrom = index to move column from.
newColOrder[colFrom] = colTo; // colTo = index to move column to.
e.g. to switch first and last column.
newColOrder[0] = 2;
newColOrder[2] = 0;
// [2,1,0];
// Reorder columns. Switch position of first and last column.
tableColReorder.fnOrder(newColOrder);
// Switch position of first and last column again. Returns columns to original position.
tableColReorder.fnOrder(newColOrder);
I have this table that I am sorting with tablsorter. I want to force sort the C, but I also want to make that row not clickable by the user. (meaning tablesorter force sorts on this row, then the user can't touch it.)
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Here is my tablesorter code:
params = {
sortList: [[2, 0]]
, headers: {
0: { sorter: false },
1: { sorter: 'text' },
2: { sorter: 'text' },
}
}
, sortForce: [[2,0]]
};
When i set row 2 to : 2: { sorter: false }, I get an exception. I think this exception is because my sortList is set to [[2,0]], my sortFroce is set to [[2,0]], but setting row 2 to, 'false'. --Is there a way to do this?
I seem to remember an issue with sortForce not working correctly, but I can't seem to find it in the change log, except back in version 2.0.2.
Either way, it should be fixed in my fork of tablesorter on github. Here is a demo I put together (I left out the sortList option so you can see the last column sort.