Trying to turn off sorting for specific columns in my table, but the wrong columns are affected? Can anyone see what I am missing here?
HTML
<table id="tableListing" class="table table-striped table-hover">
<thead>
<tr>
<th class="no-sort"></th>
<th>Personnumer</th>
<th>Namn</th>
<th>Skapad</th>
<th class="no-sort"></th>
</tr>
</thead>
<tbody>
<tr>
<td>radera</td>
<td>630214-0410</td>
<td>DEAD3, Test</td>
<td>2017-07-18 19:07:12</td>
<td><a href='member_details.aspx?id=85'>info</a></td>
</tr>
<tr>
<td>radera</td>
<td>650301-4257</td>
<td>Doe, John</td>
<td>2017-07-31 22:14:50</td>
<td><a href='member_details.aspx?id=86'>info</a></td>
</tr>
</tbody>
</table>
JS
$("#tableListing").DataTable({
"lengthMenu": [[50, 100, 150, 200, 250, -1], [50, 100, 150, 200, 250, "All"]],
"iDisplayLength": 100,
"order": [],
"columnDefs": [{
"targets": 'no-sort',
"orderable": false
}]
});
Much appreciated!
EDIT: Added image of how it turns out. As you can see, the wrong columns are affected.
If you want to deactivate sorting for specific columns only, you can do it like this:
$('#tableListing').DataTable({
columnDefs: [
{ "orderable": false, "targets": [ 0, 4 ] }
]
});
Or you can add a class like "no-sort" to the column header where you want to suppress sorting.
<thead>
<tr>
<th class="no-sort"></th>
<th>Personnumer</th>
<th>Namn</th>
<th>Skapad</th>
<th class="no-sort"></th>
</tr>
</thead>
And then use that in the DataTable definition:
$('#tableListing').DataTable({
columnDefs: [
{ "orderable": false, "targets": 'no-sort' }
]
});
You can also use as for specific columns as
$(document).ready(function() {
oTable = jQuery('#tableListing').dataTable( {
"bDestroy": true,
"bAutoWidth": true,
"bFilter": true,
"bSort": true,
"aaSorting": [[0]],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": false }
]
} );
})
You can exclude the column where you do not want sorting as set bSortable to false.
Well,In the new version 1.10 of jQuery DataTables you must use ordering option to disable ordering on the entire table:
$('#tableListing').DataTable({
"ordering": false
});
Related
One of my Datatable throws an error like on the title, but my other datatable running smoothly, I don't understand why I keep getting the error, I triple check every close tags, brackets etc. I also tried to minimize my data array for a second to check whats the problem and still I dont get the problem. here's my code,
Javascript:
$("#MyNameOfDatatable").DataTable({
"language": {
"emptyTable": "No data available"
},
"dom": "<'top'f>rtp<'bottom'l>",
"searching": false,
"data": res.data, //The data came from my ajax server side
"destroy": true,
"processing": true,
"serverside": true,
"info": true,
"autoWidth": false,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
"columns": [
{
data: null, "orderable": true,
"render": function (data, type, full, meta) {
return meta.row + 1;
}
},
{ data: "name", orderable: false }
]
})
Html:
<table class="table table-hover table-bordered table-striped cell-border" id="MyNameOfDatatable">
<thead>
<tr class="bg-primary text-light">
<th>SEQ</th>
<th>Name</th>
</tr>
</thead>
</table>
Sample data that server throws to me:
{
"data": [
{
"name": "Lorem Ipsum",
}
]
}
I am using Datatables API but am not able to add multiple buttons in one row.
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button>'
}]
});
Try this code
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button>'
+ '<button class="btn-delete" type="button">Delete</button>'
}]
});
Or
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button> <button class="btn-delete" type="button">Delete</button>'
}]
});
Update :
You can use datatable render function to update the column values.
<table class="table" id="datatable" >
<thead>
<tr>
<th>Name </th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Jquery Datatable Code :
$('#datatable').DataTable ({
"data" : FinalResult,
"columns" : [
{ "data" : Name},
{ "data" : null,render: function ( data, type, row ) {
return '<button class="btn-view" type="button">EDIT</button>';
} },
{ "data" : null,render: function ( data, type, row ) {
return '<button class="btn-delete" type="button">Delete</button>';
} }
]
});
Fiddel Link : https://jsfiddle.net/jijomonkmgm/j6madey4/
<table id="table_invdata" class="table table-striped table-bordered">
<tr>
<th>EmpID</th>
<th>EmpName</th>
<th>Email-id</th>
<th>Salary</th>
<th>Position</th>
<th></th>
</tr>
</table>
I am using SmartAdmin 1.9.1, which is an Angular 5 framework. SA provides a DataTables plugin, that I want to extend with the DataTables' Editor, so that I can do soft deletes of rows. DataTables is v1.10.18, Editor is v1.8.1.
DataTables without Soft Delete is working fine in my app. I've even been able to extend it with row selection checkboxes. Looking at the Editor Soft Delete example, I grabbed the code for the Delete block, and added it to my a5 component.html, as shown here:
<sa-datatable
[options]="{
data: sysMsgs,
columns: [
{data: 'checked'},
{data: 'rowid'},
{data: 'senderID'},
{data: 'message'},
{data: 'dateCreated'}
],
buttons: [
'copy', 'csv', 'pdf', 'print',
{
extend: 'selected',
text: 'Delete',
action: function ( e, dt, node, config ) {
var rows = table.rows( {selected: true} ).indexes();
editor
.hide( editor.fields() )
.one( 'close', function () {
setTimeout( function () { // Wait for animation
editor.show( editor.fields() );
}, 500 );
} )
.edit( rows, {
title: 'Delete',
message: rows.length === 1 ?
'Are you sure you wish to delete this row?' :
'Are you sure you wish to delete these '+rows.length+' rows',
buttons: 'Delete'
} )
.val( 'users.removed_date', (new Date()).toISOString().split('T')[0] );
}
}
],
columnDefs: [
{
targets: 0,
orderable: false,
className: 'select-checkbox'
},
{
targets: [2],
visible: true
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc']],
searching: true,
search: {
smart: false
}
}"
tableClass="table table-striped table-bordered table-hover"
>
<thead>
<tr>
<th data-hide="mobile-p">Select</th>
<th data-hide="mobile-p">ID</th>
<th data-hide="mobile-p">Sender</th>
<th data-hide="mobile-p">Message</th>
<th data-hide="mobile-p">Date Sent</th>
</tr>
</thead>
</sa-datatable>
The Soft Delete example is based on using jQuery, which I'd like to avoid, because I'd prefer to keep all my code Angular 5.
I cannot figure out how to modify the sa-datatable without resorting to jQuery. Do you have any ideas on how to get this working?
Thanks,
Bob
I decided not to use DataTables Editor, and instead was able to handle soft deletes by calling functions in the original DataTables code. Here is what I am now using:
<sa-datatable
[options]="{
data: collMsgs,
columns: [
{data: 'checked'},
{data: 'senderID'},
{data: 'message'},
{data: 'messageStatus'},
{data: 'dateCreated'},
{data: 'dateExpires'}
],
buttons: [
'copy', 'csv', 'pdf', 'print',
{
extend: 'selected',
text: 'Delete',
action: handleButtons()
},
{
extend: 'selected',
text: 'Archive',
action: handleButtons()
},
{
extend: 'selected',
text: 'Read',
action: handleButtons()
}
],
columnDefs: [
{
targets: 0,
orderable: false,
className: 'select-checkbox'
},
{
targets: [2],
visible: true
}
],
select: {
style: 'multiple',
selector: 'td:first-child'
},
order: [[ 1, 'asc']],
searching: true,
search: {
smart: false
}
}"
tableClass="table table-striped table-bordered table-hover"
>
<thead>
<tr>
<th data-hide="mobile-p">Select</th>
<th data-hide="mobile-p">Sender</th>
<th data-hide="mobile-p">Message</th>
<th data-hide="mobile-p">Status</th>
<th data-hide="mobile-p">Date Sent</th>
<th data-hide="mobile-p">Date Expires</th>
</tr>
</thead>
</sa-datatable>
Bob
This is a very common question, I'm aware. But I spent almost a day because I can't spot the error I have to post this. Can anyone see a mistake?
Markup :-
<table class="table align-items-center table-flush py-3" id="inquiry-select-table">
<thead class="thead-light">
<tr>
<th scope="col" style="display:none">ID</th>
<th scope="col" style="display:none">Version</th>
<th scope="col" style="display:none">Created Date</th>
<th scope="col" style="display:none">Created Time</th>
<th scope="col" style="display:none">Updated Date</th>
<th scope="col" style="display:none">Updated Time</th>
<th scope="col" style="display:none">Client ID</th>
<th scope="col">Client Name</th>
<th scope="col">Knowledge Source</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS :-
var inquirySelectTable;
var inquirySelectTableColumns = [{
data: "id"
},
{
data: "version"
},
{
data: "createdDate"
},
{
data: "createdTime"
},
{
data: "updatedDate"
},
{
data: "updatedTime"
},
{
data: "clientId"
},
{
data: "clientName",
defaultContent: "",
className: "all"
},
{
data: "knowledgeSource",
defaultContent: "",
className: "all",
render: function (data, type, row) {
switch (data) {
case 'WOM':
return 'Word of mouth';
case 'PAPER':
return 'Paper Article';
case 'FB':
return 'Facebook';
case 'GOOGLE':
return 'Google Ad';
case 'EMAIL':
return 'Email';
case 'SMS':
return 'SMS';
default:
return 'Other'
}
}
},
{
data: "description",
defaultContent: "",
className: "all"
}
];
var inquiryColumnDefs = [{
"targets": [0, 1, 2, 3, 4, 5, 6],
"visible": false,
"searchable": false
}];
var tableSizeFromFive = [
[5, 10, 15, 25 - 1],
[5, 10, 15, 25, "All"]
];
$(document).ready(function () {
inquirySelectTable = $('#inquiry-select-table').DataTable({
pagingType: "numbers",
responsive: true,
lengthMenu: tableSizeFromFive,
columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,
});
$.get("inquiries/getAllInquiries", function (data, status) {
console.log(data);
setGridData(inquirySelectTable, data);
});
});
function setGridData(table, data) {
table.clear();
table.rows.add(data).draw();
if (table.data().count() > 0) {
$(".table-responsive").removeClass("disabled");
} else {
$(".table-responsive").addClass("disabled");
}
}
The data received from the server :-
The error I'm getting is :-
According to https://datatables.net/manual/tech-notes/4, since I'm getting an Integer as the parameter it means the column count does not match with the row count. But it seems ok to me. Does anyone see something I missed?
Seems like you've swapped columnDefs and columns:
columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,
Interchange them and it'll work fine:
columnDefs: inquiryColumnDefs,
columns: inquirySelectTableColumns,
Example fork:
http://jsfiddle.net/bsf69o04/
I am using mRender to add checkboxes in the first column of the tbody... the correct css styling is being applied, but they are not stylized when I view the table. I can only assume this is because I am using mRender to add these values in, however, if I do other css like changing color of text it works fine. I have no problem with the checkbox in the thead being properly styled, but this is included by default with the html. Ideas?
the html:
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
the js:
$('#sample_1').dataTable({
//start my code
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/assets/data-tables/test-normal.php",
//end my code
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"bSortable": false,
"mRender": function ( data, type, full ) {
return '<input type="checkbox" class="checkboxes" value="'+data+'" />';
}
} ],
// set the initial value
"iDisplayLength": 5,
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
});
Had to use :
"fnInitComplete": function() {
$(".checkboxes").uniform();
}
You missed the mData portion
In aoColumns, not aoColumnDefs, use the following
{ "mData": null , // can use null, the numeric array number, or assoc array string
"mRender" : function ( data, type, full ) {
return '<input type="checkbox" class="checkboxes" value="'+data+'" />'}
},