Please help. I am not sure where I am going wrong
I want the table to be sorted by the first column. I tried several variations, but sort is not working properly
dataTable = $("#deptDtTable").dataTable({
"bFilter" : false
"bProcessing" : true,
"bServerSide" : true,
"bSort" : true,
"bStateSave" : false,
"iDisplayLength" : 25,
"iDisplayStart" : 0,
"fnDrawCallback" : function() {
},
"sAjaxSource" : "/url/url/datatable/dept",
"aaSorting": [[ 1] ],
"aoColumns" : [
{
"mData" : 'id'
}, {
"mData" : 'client_name'
}, {
"mData" : 'ssn'
}, {
"mData" : 'department'
}, {
"mData" : 'account_id'
}, {
"mData" : 'dateEntered',
"render" : function(data) {
if (data !== null) {
var date = new Date(data);
return date.toLocaleString();
} else {
return '';
}
}
} ]
});
This is what I did, and the sorting works on the first column.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index62</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('#example').
dataTable({
"processing": true,
"serverSide": true,
"info": true,
"stateSave": true,
"ajax": {
"url": "/Home/AjaxGetJsonData",
"type": "GET"
},
"columns": [
{ "data": "Name", "orderable": true },
{ "data": "Age", "orderable": false },
{ "data": "DoB", "orderable": true }
],
"order": [[0, "asc"]]
});
});
</script>
</head>
<body>
<div style="margin:30px;">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr style="text-align:left;">
<th>Name</th>
<th>Age</th>
<th>DoB</th>
</tr>
</thead>
<tfoot>
<tr style="text-align:left;">
<th>Name</th>
<th>Age</th>
<th>DoB</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
You can try like this
dataTable = $("#deptDtTable").dataTable({
"bFilter" : false
.......
"aaSorting": [[ 0, "desc" ]] // Sort by first column descending
......
});
Related
I am trying to render a table in javascript as follows:
$('#serviceTable').DataTable({
responsive: true,
aaData: services,
bJQueryUI: true,
aoColumns: [
{ mData: 'service_name' },
{ mData: 'last_incident' },
{ mData: 'integration' }
]
});
I wanted a hyperlink on the text in column service_name. I tried adding data-formatter in the table definition as follows
<table id="serviceTable" class="table table-bordered table-striped">
<thead>
<tr>
<th data-field="service_name" data-formatter="LinkFormatter">Service</th>
<th data-field="last_incident">Last Incident</th>
<th data-field="integration">Integration</th>
</tr>
</thead>
</table>
and corresponding function
function LinkFormatter(value, row, index) {
return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
}
But this does not add hyperlink. Can anyone please help?
Try using render like following.
$('#serviceTable').DataTable({
responsive: true,
aaData: service,
bJQueryUI: true,
aoColumns: [
{
mData: 'service_name' ,
"render": function(value, type, row, meta){
return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
}
},
{ mData: 'last_incident' },
{ mData: 'integration' }
]
}
);
Working Sample
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="serviceTable" class="table table-bordered table-striped">
<thead>
<tr>
<th data-field="service_name" data-formatter="LinkFormatter">Service</th>
<th data-field="last_incident">Last Incident</th>
<th data-field="integration">Integration</th>
</tr>
</thead>
</table>
</body>
<script>
var service=[{"service_id" :"1", "service_name":"Service 1","last_incident":"i1","integration":"i2"}
,{"service_id" :"2", "service_name":"Service 2","last_incident":"i1","integration":"i2"}
];
$('#serviceTable').DataTable({
responsive: true,
aaData: service,
bJQueryUI: true,
aoColumns: [
{
mData: 'service_name' ,
"render": function(value, type, row, meta){
return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
}
},
{ mData: 'last_incident' },
{ mData: 'integration' }
]
});
</script>
have you tried DataTables render option?
DataTables Column Rendering
$('#serviceTable').DataTable({
responsive: true,
aaData: services,
bJQueryUI: true,
aoColumns: [
{ mData: 'service_name',
render: function(data, type, row) {
return ''+value+'';
}
},
{ mData: 'last_incident' },
{ mData: 'integration' }
],
});
I am using datatables in mu MVC application, i want to refresh my table everytime i edit any record through model popup.
it works one repord only, when i open model popup second time to edit same / other records it doesn't.
please help, here is my code.
<div class="tablecontainer">
<table id="schoolsTable" class="table table-bordered table-condensed table-hover table-striped">
<thead>
<tr>
<th>
Status
</th>
<th>
Code
</th>
<th>
Name
</th>
<th>
Address
</th>
<th>
Actions
</th>
</tr>
</thead>
</table>
</div>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css">
#section Scripts{
<script src="~/Content/datatables/datatables.min.js"></script>
<script src="assets/lib/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.6/js/jquery.tablesorter.min.js"></script>
<script>
$(document).ready(function () {
var oTable = $('#schoolsTable').DataTable({
"ajax": {
"url": "/School/viewschool",
"type": "Get",
"datatype": "json"
},
"columns": [
{ "data": "Mas_SchoolStatusID", "autowidth": true },
{ "data": "SchoolCode", "autowidth": true },
{ "data": "SchoolName", "autowidth": true },
{ "data": "SchoolAddress", "autowidth": true },
{
"data": "Mas_SchoolID", "width": "50px", "render": function (data) {
return '<a class="popup" href=/School/Edit/' + data +'>Edit</a>';
}
}
]
});
$('.tablecontainer').on('click', 'a.popup', function (e) {
e.preventDefault();
OpenPopup($(this).attr('href'))
})
function OpenPopup(pageUrl)
{
var $pageContent = $('<div/>');
$pageContent.load(pageUrl);
$dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
.html($pageContent)
.dialog({
dragable: false,
autoOpen: false,
resizeable: false,
model: true,
title: 'Popup Dialog',
height: 550,
width: 600,
close: function () {
$dialog.dialog('distroy').remove();
}
})
$('.popupWindow').on('submit', '#popupForm', function (e) {
var url = $('#popupForm')[0].action;
$.ajax({
type: "POST",
url: url,
data: $('#popupForm').serialize(),
success: function (data) {
if (data.status) {
oTable.ajax.reload();
$dialog.dialog('close');
}
}
})
e.preventDefault();
})
$dialog.dialog('open');
}
});
</script>
}
i misspelled in destroy in close function as distroy.
close: function () {
$dialog.dialog('distroy').remove();
}
which should be:
close: function () {
$dialog.dialog('destroy').remove();
}
I've a problem when using datatables serverside adding column with parameter. when create datatables serverside without additional column (just query list form database) it is works fine.
But i've difficulty when I want add one column that has value ID.
My script (JS) :
var dataTable = $('#mytablex').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"<?php echo base_url();?>admin/ap_invoice/getPOs", // json datasource
type: "post", // method , by default get
"data": {
"posupplier_id": $('#vendor_id').val()
},
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#mytablex").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
}
},
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<input type='checkbox' id='supid[]' name='supid[]'>"
} ]
} );
when i'm adding
<input type='checkbox' id='supid[]' name='supid[]'>
how to fill with value each rowid , i want become like this
<input type='checkbox' id='supid[]' name='supid[]' value='row->po_id'>
or you can use select ext.
$(document).ready(function () {
var events = $('#events');
var table = $('#example').DataTable({
//you can change data to ajax, there is an example
data: [{
"id": 1,
"name": "datatables",
"position": "anywhere",
"office": "stackoverflow",
"age": 18,
"salary": 341
}],
dom: 'Bfrtip',
columns: [
{
"data": "id"
},
{
"data": "name"
},
{
"data": "position"
},
{
"data": "office"
},
{
"data": "age"
},
{
"data": "salary"
}
],
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[1, 'asc']],
buttons: [
{
text: 'Get selected data',
action: function () {
var count = table.rows({
selected: true
}).count();
events.prepend('<div>' + count + ' row(s) selected</div>');
var data = table.rows({
selected: true
}).data().toArray();
//print whole row data
console.log(data);
//print id
console.log(data[0].id);
}
}
]
});
});
#events {
margin-bottom: 1em;
padding: 1em;
background-color: #f6f6f6;
border: 1px solid #999;
border-radius: 3px;
height: 100px;
overflow: auto;
}
<link href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I'm trying to nest a jQuery DataTable in a main DataTable. I am able to create the child table and populate it, but when I try and copy the HTML into a JavaScript function that shows the nested row, I get an error since the HTML has line breaks, extra spaces and is not wrapped in quotes.
How can I get this to work?
<link rel="stylesheet" type="text/css" href="/css/dataTables.jqueryui.css" />
<script type="text/javascript" charset="utf8" src="/scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="/Scripts/dataTables.jqueryui.js"></script>
<script type="text/javascript" charset="utf8" src="/scripts/tinymce/tiny_mce.js"></script>
<style type="text/css">
#ethicsOpinions_wrapper select {
width: auto;
}
.ui-dialog-content.ui-widget-content {
padding: 10px 30px 10px 15px;
}
td.details-control {
background: url('/images/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/images/details_close.png') no-repeat center center;
}
</style>
<script type="text/javascript">
var ethicalRulesTableHtml;
$(function () {
ethicalRulesTableHtml = $("#ethicalRulesGrid").html();
var table = $('#ethicalRulesSections').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRulesSections",
"order": [[1, 'asc']],
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": null,
className: "dt-center details-control",
"defaultContent": "",
"width": "20px",
"orderable": false
},
{
"data": 0,
"visible": false
},
{
"data": 1,
"width": "50px",
className: "dt-center"
},
{
"data": 2
}
]
});
// Add event listener for opening and closing details
$('#ethicalRulesSections tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child("'" + format(row.data()) + "'").show();
tr.addClass('shown');
}
});
});
function format(d) {
$('#ethicalRules').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
"order": [[1, 'asc']],
"width": "630px",
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": 1,
"visible": false
},
{
"data": 2,
"width": "50px",
className: "dt-center"
},
{
"data": 3
}
],
"initComplete": function (settings, json) { return $('#ethicalRules')[0].outerHTML; }
});
}
</script>
<div id="ethicalRulesSectionsGrid">
<table id="ethicalRulesSections" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row">
<thead>
<tr>
<th></th>
<th></th>
<th>Section Number</th>
<th>Section</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="ethicalRulesGrid">
<table id="ethicalRules" cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
<thead>
<tr>
<th></th>
<th>Rule Number</th>
<th>Rule</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
Basically the solution is to clone your child table HTML template, add a new child row using HTML content of the cloned element, locate the added table and create a DataTables object based on that.
You need to remove id attribute form your child table as shown below and make its container initially hidden.
HTML
I have omitted some of your HTML code, only child table is shown below.
<div id="ethicalRulesGrid" style="display:none">
<table cellpadding="0" cellspacing="0" border="0" class="display ca_highlight_row" style="margin:0 0 0 110px;">
<thead>
<tr>
<th></th>
<th>Rule Number</th>
<th>Rule</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
var ethicalRulesTableHtml;
$(function () {
ethicalRulesTableHtml = $("#ethicalRulesGrid").html();
var table = $('#ethicalRulesSections').DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRulesSections",
"order": [[1, 'asc']],
stateSave: false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": null,
className: "dt-center details-control",
"defaultContent": "",
"width": "20px",
"orderable": false
},
{
"data": 0,
"visible": false
},
{
"data": 1,
"width": "50px",
className: "dt-center"
},
{
"data": 2
}
]
});
// Add event listener for opening and closing details
$('#ethicalRulesSections tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// Destroy child table
tr.next().find('table').DataTable().destroy();
// This row is already open - close it
row.child.remove();
tr.removeClass('shown');
}
else {
// Open this row
format(table, tr);
}
});
});
function format(table, tr) {
var row = table.row(tr);
var d = row.data();
tr.addClass('shown');
// Clone child table and insert it as child row
row.child($('#ethicalRulesGrid').clone().html()).show();
// Locate child table
var $child_table = tr.next().find('table');
// Initialize child table
$child_table.DataTable({
"ajax": "/umbraco/surface/RulesSurface/getRules/" + d[0],
"order": [[1, 'asc']],
"width": "630px",
"stateSave": false,
"paging": false,
"autoWidth": true,
"processing": true,
"jQueryUI": true,
"destroy": true,
"deferRender": true,
"filter": false,
"dom": '<lfr>t<"F"p>',
"columns": [
{
"data": 1,
"visible": false
},
{
"data": 2,
"width": "50px",
className: "dt-center"
},
{
"data": 3
}
]
});
}
I am using the jQuery DataTables plugin to sort the table fields. My question is: how do I disable sorting for a particular column? I have tried with the following code, but it did not work:
"aoColumns": [
{ "bSearchable": false },
null
]
I have also tried the following code:
"aoColumnDefs": [
{
"bSearchable": false,
"aTargets": [ 1 ]
}
]
but this still did not produce the desired results.
This is what you're looking for:
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
As of DataTables 1.10.5 it is now possible to define initialisation
options using HTML5 data-* attributes.
-from DataTables example - HTML5 data-* attributes - table options
So you can use data-orderable="false" on the th of the column you don't want to be sortable. For example, the second column "Avatar" in the table below will not be sortable:
<table id="example" class="display" width="100%" data-page-length="25">
<thead>
<tr>
<th>Name</th>
<th data-orderable="false">Avatar</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...[ETC]...
</tbody>
</table>
See a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/.
To make a first column sorting disable, try with the below code in datatables jquery. The null represents the sorting enable here.
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );
Disable Sorting on a Column in jQuery Datatables
Using Datatables 1.9.4 I've disabled the sorting for the first column with this code:
/* Table initialisation */
$(document).ready(function() {
$('#rules').dataTable({
"sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sLengthMenu" : "_MENU_ records per page"
},
// Disable sorting on the first column
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0 ]
} ]
});
});
EDIT:
You can disable even by using the no-sort class on your <th>,
and use this initialization code:
// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ]
EDIT 2
In this example I'm using Datables with Bootstrap, following an old blog post. Now there is one link with updated material about styling Datatables with bootstrap.
What I use is just add a custom attribute in thead td and control sorting by checking that attr value automatically.
So the HTML code will be
<table class="datatables" cellspacing="0px" >
<thead>
<tr>
<td data-bSortable="true">Requirements</td>
<td>Test Cases</td>
<td data-bSortable="true">Automated</td>
<td>Created On</td>
<td>Automated Status</td>
<td>Tags</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>
And JavaScript for initializing datatables will be
(it will dynamically get the sorting information from table iteself ;)
$('.datatables').each(function(){
var bFilter = true;
if($(this).hasClass('nofilter')){
bFilter = false;
}
var columnSort = new Array;
$(this).find('thead tr td').each(function(){
if($(this).attr('data-bSortable') == 'true') {
columnSort.push({ "bSortable": true });
} else {
columnSort.push({ "bSortable": false });
}
});
$(this).dataTable({
"sPaginationType": "full_numbers",
"bFilter": bFilter,
"fnDrawCallback": function( oSettings ) {
},
"aoColumns": columnSort
});
});
columnDefs now accepts a class. I'd say this is the preferred method if you'd like to specify columns to disable in your markup:
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th class="datatable-nosort">Actions</th>
</tr>
</thead>
...
</table>
Then, in your JS:
$("table").DataTable({
columnDefs: [{
targets: "datatable-nosort",
orderable: false
}]
});
Here is what you can use to disable certain column to be disabled:
$('#tableId').dataTable({
"columns": [
{ "data": "id"},
{ "data": "sampleSortableColumn" },
{ "data": "otherSortableColumn" },
{ "data": "unsortableColumn", "orderable": false}
]
});
So all you have to do is add the "orderable": false to the column you don't want to be sortable.
$("#example").dataTable(
{
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0, 1, 2, 3, 4, 5]
}]
}
);
For Single column sorting disable try this example :
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0 ] }
]
});
});
</script>
For Multiple columns try this example: you just need to add column number. By default it's starting from 0
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
]
});
});
</script>
Here only Column 3 works
As of 1.10.5, simply include
'orderable: false'
in columnDefs and target your column with
'targets: [0,1]'
Table should like like:
var table = $('#data-tables').DataTable({
columnDefs: [{
targets: [0],
orderable: false
}]
});
If you set the FIRST column orderable property to false, you must also set the default order column otherwise it won't work since first column is the default ordering column. Example below disables sorting on first column but sets second column as default order column (remember dataTables' indexes are zero based).
$('#example').dataTable( {
"order": [[1, 'asc']],
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
To update Bhavish's answer (which I think is for an older version of DataTables and didn't work for me). I think they changed the attribute name. Try this:
<thead>
<tr>
<td data-sortable="false">Requirements</td>
<td data-sortable="false">Automated</td>
<td>Created On</td>
</tr>
</thead>
<tbody>
<tr>
<td>
"aoColumnDefs" : [
{
'bSortable' : false,
'aTargets' : [ 0 ]
}]
Here 0 is the index of the column, if you want multiple columns to be not sorted, mention column index values seperated by comma(,)
Using class:
<table class="table table-datatable table-bordered" id="tableID">
<thead>
<tr>
<th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
<th class="sort-alpha">Employee name</th>
<th class="sort-alpha">Send Date</th>
<th class="sort-alpha">Sender</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
<td>Alexander Schwartz</td>
<td>27.12.2015</td>
<td>dummy#email.com</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#tableID').DataTable({
'iDisplayLength':100,
"aaSorting": [[ 0, "asc" ]],
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['nosort']
}]
});
});
</script>
Now you can give "nosort" class to <TH>
This works for me for a single column
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false
}]});
If you already have to hide Some columns, like I hide last name column. I just had to concatenate fname , lname , So i made query but hide that column from front end. The modifications in Disable sorting in such situation are :
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 3 ] },
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
Notice that I had Hiding functionality here
"columnDefs": [
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
Then I merged it into "aoColumnDefs"
Use the following code to disable ordering on first column:
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
To disable default ordering, you can also use:
$('#example').dataTable( {
"ordering": false,
} );
There are two ways, one is defined in html when you define table headers
<thead>
<th data-orderable="false"></th>
</thead>
Another way is using javascript, for example, you have table
<table id="datatables">
<thead>
<tr>
<th class="testid input">test id</th>
<th class="testname input">test name</th>
</thead>
</table>
then,
$(document).ready(function() {
$('#datatables').DataTable( {
"columnDefs": [ {
"targets": [ 0], // 0 indicates the first column you define in <thead>
"searchable": false
}
, {
// you can also use name to get the target column
"targets": 'testid', // name is the class you define in <th>
"searchable": false
}
]
}
);
}
);
you can also use negative index like this:
$('.datatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ -1 ] }
]
});
The code will look like this:
$(".data-cash").each(function (index) {
$(this).dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"bSort": false,
"aaSorting": []
});
});
Here is the answer !
targets is the column number, it starts from 0
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
You can directry use .notsortable() method on column
vm.dtOpt_product = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
vm.dtOpt_product.withPaginationType('full_numbers');
vm.dtOpt_product.withColumnFilter({
aoColumns: [{
type: 'null'
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'select',
bRegex: false,
bSmart: true,
values: vm.dtProductTypes
}]
});
vm.dtColDefs_product = [
DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
];
set class "no-sort" in th of the table
then add css
.no-sort { pointer-events: none !important; cursor: default !important;background-image: none !important; }
by this it will hide the arrow updown and disble event in the head.