I am using Data Tables Jquery Plugin. Can anyone help me stopping the table from sorting the first and second columns?
I need the user to be able to click on the other columns and sort them, but when I do it, the first two columns also sort. Can these values be locked and never sort? (I need them static)
For those of you looking to prevent sorting on columns but still allow them to sort when other columns are sorted:
$('#table').dataTable({
// Disable sorting on the first two columns
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0,1 ]
} ]
});
Or alternatively you can target a class like so:
// Disable sorting based on class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "disableSort" ]
} ]
Apply the class to the table header not the row.
For the OP, how to make the columns completely static in order to maintain some sort of ranking / index feature every time a column is clicked:
$(document).ready(function() {
$('#example').dataTable( {
"fnDrawCallback": function ( oSettings ) {
/* Need to redo the counters if filtered or sorted */
if ( oSettings.bSorted || oSettings.bFiltered )
{
for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
{
$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
}
}
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[ 1, 'asc' ]]
} );
} );
Related
At the first Page I can see negative value (e.g. -11) being changed to red.
However, when I clicked to the second page, negative value didn't change to red.
My code as below:
$("#listReport").DataTable({
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [-1]
}]
});
$('#listReport tbody td').each(function (index) {
var qtyvalue = $(this).html();
if (qtyvalue < 0) {
$(this).wrapInner('<strong style="color:red"></strong>');
}
});
Any idea what to change in my code so that pagination works well with color change of the negative values?
You can use columns.render instead of manually trying to do it. Try this
$("#listReport").DataTable({
'aoColumnDefs': [
{
'bSortable': false,
'aTargets': [-1]
},{
'targets': [1], // target column
"data": 1, // column index
"render": function ( data, type, row, meta ) {
if( type === 'display' ){
return '<strong style="color:red">'+data+'</strong>';
}
return data;
}
}
]
});
I have a table that I am using jQuery Datatable for.
var myTable = $("#My-Table").DataTable({
"order": [2, "asc"],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [3] },
{ "bSearchable": false, "aTargets": [2, 3] }
]
});
Now, the column that I am trying to perform ordering on is a column that contains checkboxes, so on page load I am setting a data attribute for that td element and then ordering by that attribute. The attribute will either be 0 or 1.
#(if item.Active)
{
<td class="active-td" data-order="0">
#Html.DisplayFor(modelItem => item.Active)
</td>
}
else
{
<td class="active-td" data-order="1">
#Html.DisplayFor(modelItem => item.Active)
</td>
}
Now, the user has the ability to deactivate or activate records.. and when they do, I am changing the data-order appropriately... but when I call draw, it is not putting the rows that contain unchecked td elements at the bottom and rows that contain checked td elements at the top like it does on page load.
Here is my jQuery for when a user wants to deactivate.
var td = row.children('td.active-td').attr("data-order", 1); // changing td data attribute accordingly
myTable.cell(myTable.row(row), 2, {order: 'current'})
.data("<input disabled='disabled' class='check-box' type='checkbox' />")
.draw();
The .draw() is not reordering the table like it does on page load.
How do I accomplish this?
Here is what it looks like when I deactive someone:
I want that row to be ordered so that checked checkboxes be at the top, and the unchecked at the bottom.
UPDATE
<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/custom-data-source/dom-checkbox.js"></script>
var myTable = $("#My-Table").DataTable({
"columnDefs":[
{
"targets": 2,
"orderDataType": "dom-checkbox"
}],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [3] },
{ "bSearchable": false, "aTargets": [2, 3] }
]
});
Avoid using data- attributes for ordering dynamic data, they are good only for static data.
Use dom-checkbox plug-in that allows to sort based on the checked state of checkboxes in a column.
Include appropriate plug-in JS file and use orderDataType option for the column containing checkboxes.
For example:
var myTable = $("#My-Table").DataTable({
// ... skipped ...
"columnDefs": [
{
"targets": 0,
"orderDataType": "dom-checkbox"
}
]
});
See this example for code and demonstration.
I am using jQuery DataTables to style and give functionality to one of my tables:
My Goal
Order by whether or not the type of funding is active or not.. which is what it is doing currently as you can see. Now, I would like to order the Funding column alphabetically.. so my wanted outcome should be:
Funding One
Funding Two
Funding Three
Funding Four
Alpha
Beta
Charlie
Test
test2
Here is what I have so far my datatables script:
var codeFundingTable = $("#Code-Funding-Table").DataTable({
"bPaginate": false,
"bFilter": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [2] },
{ "bSearchable": false, "aTargets": [2] }
],
"columns": [
{ "orderData": [1] },
{ "orderData": [0] }
]
});
So I am first ordering by column 1 (Active, 0-based) then by column 0 (Funding) but it is not doing it alphabetically.
How can I make this happen?
It is a guess since we have no sample data. For example, what is the value of "active" (besides a checkbox is rendered)? But I believe you can just do
var table = $('#example').DataTable({
order: [[1, 'asc'], [0, 'asc']]
})
active column is sorted first, if values is 0 and 1 asc should be used
first column is secondly sorted alpha, with respect of second column order
Here is a demo -> http://jsfiddle.net/0f9Ljfjr/949/ position is sorted first, then name is sorted within each position "type".
Try this on for size
"columns": [
{ "orderData": [1,0] },
https://datatables.net/examples/basic_init/multi_col_sort.html
In my case, what helped me is this.
I used data-order attribute to sort my tables.
data-order="[[ 0, "asc" ], [ 1, "asc" ]]
Is there anyway with DataTables to preform a multi-column sort where the secondary column is always sorted DSC irrespective to what sorting direction the primary column is sorted.
{
targets: [ 0 ],
orderData: [ 0, 12 ] //Column 12 needs to always be sorted DSC
}
You could just use orderFixed for sorting like this
$(document).ready( function () {
var table = $('#example').DataTable({
columnDefs: [{
targets: [ 0 ],
orderData: [ 0, 12 ]
}],
orderFixed: [[ 12, "desc" ]]
});
} );
Hope this helps.
I have a datatable
<table data-bind="dataTable: {
data: items,
options: {
bPaginate: false,
aaSorting: [[0, 'desc']],
aoColumns: [
{ sClass: 'date', mDataProp: 'date' },
{ mDataProp: 'time' },
{ sClass: 'name', mDataProp: 'name' },
{ sClass: 'thought', mDataProp: 'thought' }
]
}
}">
there is also another value in the items that I don't display (thought type).
I want to change the class of the cell 'thought' depending on the value of 'thought type'.
So if thought type is new idea I want the cell that displays the value of 'thought' to be yellow.
Is this possible with datatables?
Add a function
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "is wat you needed" ) {
sReturn = "add style to your element";
}
return sReturn;
}
Go through the example shown in below link
http://datatables.net/examples/data_sources/js_array.html
You can see that the A alphabet is bold compared to others..Hope this solves your problem
This Solution help fix my problem might help u.
for more info check this link: columns.createdCell
Using createdCell manipulate the DOM within columnDefs options.
For example,
"columnDefs": [
{
"targets": [1] // first CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
},{
"targets": [2] //second CELL That will be checked,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData < 1) {
$(td).addClass('someClass');
}
}
} ],
Take a look at fnRowCallback in the API. For any given row, this can respond to that row just after drawing it and adjust the row as needed based on the data of that row. For example, something like this might work:
'fnRowCallback' : function(row, data) {
if (data[0] === 'someValue') {
$('td:eq(0)', row).addClass('someClass');
}
}