DataTables iniating multiple child tables with columnDefs intact

DataTables iniating multiple child tables with columnDefs intact - javascript

Background: I have 7 DataTables being created by a PHP loop (HTML is created directly on the page - not sourced from AJAX or anywhere else). Within these summary level DataTables, I have a further 6 detail level DataTables in a nested loop (one for each of the summary level tables - apart from one). These are in the last column of each summary table and using the responsive option I am able to have the content of the detail tables pushed to a child row as per https://datatables.net/examples/api/row_details.html
Problem: I am trying to initiate each child (detail) table in the initComplete: function(){} of the parent table. It seems to be doing something although the table doesn't retain any of the DataTables libraries functionality (column definition widths for example).
My main issue is that is ignoring my DataTable options (setting widths via columnDefs in this case is vital:
Am I missing something? Is there a reason it's choosing to override/ignore my column widths. The parent table allows responsive and columnDefs.
See snippet for example:
$('#summary_table').DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [{
'width': '3%',
'targets': [0]
},
{
'width': '10%',
'targets': [1, 2]
},
{
"className": "dt-center",
"targets": "_all"
},
],
initComplete: function() {
console.log("Initialisation of table complete");
var sub_table = $('#summary_table').find('.ic-detail-table');
if (sub_table.length > 0) {
var sub_table_inst = $(sub_table).DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [
//IGNORED????
{
'width': '10%',
'targets': [0]
},
{
'width': '25%',
'targets': [1]
},
{
'width': '25%',
'targets': [2]
},
{
'width': '40%',
'targets': [3]
},
{
"className": "dt-center",
"targets": "_all"
},
],
ordering: true,
sorting: true,
initComplete: function() {
console.log("SUB TABLE INIT COMPLETE");
},
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
}
},
ordering: false,
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
<thead>
<tr>
<th></th>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th class='none'>Detail table</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>
<table class='table compact' class='ic-detail-table'>
<thead>
<tr>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th>Heading four</th>
</tr>
</thead>
<tbody>
<tr>
<td>Heading one</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

What you're looking to do isn't by default part of datatables, but you can hack your way through it by adding a maximum for width for the classes dtr-details and compact
$('#summary_table').DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [{
'width': '3%',
'targets': [0]
},
{
'width': '10%',
'targets': [1, 2, 3]
},
{
"className": "dt-center",
"targets": "_all"
},
],
initComplete: function() {
console.log("Initialisation of table complete");
var sub_table = $('#summary_table').find('.ic-detail-table');
if (sub_table.length > 0) {
var sub_table_inst = $(sub_table).DataTable();
}
},
ordering: false,
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
.dtr-details,
.compact {
width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
<thead>
<tr>
<th></th>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th class='none'>Detail table</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>
<table class='table compact' class='ic-detail-table'>
<thead>
<tr>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th>Heading four</th>
</tr>
</thead>
<tbody>
<tr>
<td>Heading one</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Also note that I changed your 'targets': [1, 2] to 'targets': [1, 2, 3] and you don't need any options in the child datatables, as they won't be taken into account.
If you add an id to the inner table, for example innerTable you could then just add this css to make the first column's width 3% :
#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
width: 3%!important;
}
$('#summary_table').DataTable({
paging: false,
autoWidth: false,
searching: false,
columnDefs: [{
'width': '3%',
'targets': [0]
},
{
'width': '10%',
'targets': [1, 2, 3]
},
{
"className": "dt-left",
"targets": "_all"
},
],
initComplete: function() {
console.log("Initialisation of table complete");
var sub_table = $('#summary_table').find('.ic-detail-table');
if (sub_table.length > 0) {
var sub_table_inst = $(sub_table).DataTable();
}
},
ordering: false,
responsive: true,
dom: '<"clear">rt',
order: [
[1, 'asc']
]
});
.dtr-details,
.compact {
width: 100% !important;
}
#innerTable thead tr th:first-child,
#innerTable tbody tr td:first-child {
width: 3% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css" rel="stylesheet" />
<table class='table table-bordered display compact' id='summary_table'>
<thead>
<tr>
<th></th>
<th>Heading one</th>
<th>Heading two</th>
<th>Heading three</th>
<th class='none'>Detail table</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>cell one</td>
<td>cell two</td>
<td>cell three</td>
<td>
<table id="innerTable" class='table compact' class='ic-detail-table'>
<thead>
<tr>
<th>Id</th>
<th>Heading two</th>
<th>Heading three</th>
<th>Heading four</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
<tr>
<td>2</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
<tr>
<td>3</td>
<td>Heading two</td>
<td>Heading three</td>
<td>Heading four</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JSFiddle : https://jsfiddle.net/6fp3kbnh/

Related

How to sort a jQuery DataTables table using a separate column?

Is it possible to sort a DataTables table using a separate column? In the example below, the table is sorted using the first column by default, which is also hidden. Even though the third column is a date column, it is not in a numerical format. When trying to sort the table using the third column, it is sorting alphabetically rather than by date.
How can the table be sorted by date correctly using the third column? Is it possible to sort the table using the hidden first column when toggling the third column?
$('#table').DataTable({
responsive: true,
"order": [[0, "desc"]],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
<thead>
<tr>
<th>Numerical date</th>
<th>Description</th>
<th>String format date</th>
</tr>
<thead>
<tbody>
<tr>
<td>20200801</td>
<td>Record 1</td>
<td>August 1, 2020</td>
</tr>
<tr>
<td>20200701</td>
<td>Record 2</td>
<td>July 1, 2020</td>
</tr>
<tr>
<td>20200501</td>
<td>Record 3</td>
<td>May 1, 2020</td>
</tr>
<tr>
<td>20200401</td>
<td>Record 4</td>
<td>April 1, 2020</td>
</tr>
</tbody>
</table>

You can add the following. You should be able to sort by date correctly:
"aoColumns": [{},{},{"bSortable": true, "sType": "date"}]
See it in action in the demo below:
$('#table').DataTable({
responsive: true,
"order": [[2, "desc"]],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
"aoColumns": [{},{},{"bSortable": true, "sType": "date"}]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
<thead>
<tr>
<th>Numerical date</th>
<th>Description</th>
<th>String format date</th>
</tr>
<thead>
<tbody>
<tr>
<td>20200801</td>
<td>Record 1</td>
<td>August 1, 2020</td>
</tr>
<tr>
<td>20200701</td>
<td>Record 2</td>
<td>July 1, 2020</td>
</tr>
<tr>
<td>20200501</td>
<td>Record 3</td>
<td>May 1, 2020</td>
</tr>
<tr>
<td>20200401</td>
<td>Record 4</td>
<td>April 1, 2020</td>
</tr>
</tbody>
</table>

You can give tds a data-sort attribute. Then you wouldn't need the first column at all.
$('#table').DataTable({
responsive: true,
"order": [
[1, "desc"]
]
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<table id="table">
<thead>
<tr>
<th>Description</th>
<th>String format date</th>
</tr>
<thead>
<tbody>
<tr>
<td>Record 1</td>
<td data-sort="20200801">August 1, 2020</td>
</tr>
<tr>
<td>Record 2</td>
<td data-sort="20200701">July 1, 2020</td>
</tr>
<tr>
<td>Record 3</td>
<td data-sort="20200501">May 1, 2020</td>
</tr>
<tr>
<td>Record 4</td>
<td data-sort="20200401">April 1, 2020</td>
</tr>
</tbody>
</table>

Jquery Datatable drag and drop with row grouping

I have used jquery dataTable and I have a requirement as below:
If I drag the row (- BRAND NAME:....) then it should drag between rows only and with all it's content.
If I drag content of the row group then it should not overlap with other group.
Here is what I have done so far:
HTML:
<table id="example">
<thead>
<tr>
<th>Name</th>
<th>type</th>
<th>age</th>
</tr>
</thead>
<tbody id="sortable">
<tr id="1">
<td>Name</td>
<td>Type1</td>
<td>Age</td>
</tr>
<tr id="2">
<td>Name</td>
<td>Type1</td>
<td>Age</td>
</tr>
<tr id="3">
<td>Name</td>
<td>Type2</td>
<td>Age</td>
</tr>
<tr id="4">
<td>Name</td>
<td>Type2</td>
<td>Age</td>
</tr>
</tbody>
</table>
Jquery:
var table = $('#example').DataTable({
"searching": false,
"paging": false,
"info": false,
"order": [[0, "asc"]],
drawCallback: function (settings) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(1, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="groups"><td class="tdgroups" colspan="22" style="Cursor:hand !important;BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + '- BRAND NAME: ' + group + '</td></tr>'
);
last = group;
}
});
}
});
$("#sortable").sortable();
$("#sortable").disableSelection();
Link of Jsfiddle: DEMO

You can change your markup a little bit. Place each row group in separate <tbody>
and make those sortable.
var table = $('#example').DataTable({
"searching": false,
"bSort": false,
"paging": false,
"info": false,
});
$("#example>tbody").sortable({
items: "tr:not(.group-row)"
});
$("#example").sortable({
items: "tbody"
}).disableSelection();
table.dataTable tbody tr.group-row {
cursor: move;
background-color: rgb(237, 208, 0);
font-weight: 700;
color: #006232;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<table id="example">
<thead>
<tr>
<th>Name</th>
<th>type</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr class="group-row">
<td>- BRAND NAME: Type 1</td>
<td></td>
<td></td>
</tr>
<tr id="1">
<td>NameA</td>
<td>Type1</td>
<td>Age</td>
</tr>
<tr id="2">
<td>NameB</td>
<td>Type1</td>
<td>Age</td>
</tr>
</tbody>
<tbody>
<tr class="group-row">
<td>- BRAND NAME: Type 2</td>
<td></td>
<td></td>
</tr>
<tr id="3">
<td>NameD</td>
<td>Type2</td>
<td>Age</td>
</tr>
<tr id="4">
<td>NameC</td>
<td>Type2</td>
<td>Age</td>
</tr>
</tbody>
</table>

Inspired by the answer by Munim Munna, I created a version that automatically modifies the table-structure by utilizing only javascript/jquery.
let table = $('#example').DataTable({
"searching": false,
"sort": false,
"order": [[1, "asc"], [0, "asc"]],
"paging": false,
"info": false,
drawCallback: function (settings) {
let api = this.api();
let rows = api.rows({ page: 'current' }).nodes();
if ($(rows).parent().is("tbody")) {
$(rows).unwrap();
}
let last = null;
let group_index = -1;
api.column(1, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
// make previous group sortable
if (last) {
$("#example > tbody[data-group='" + group_index + "']").sortable({
items: "tr.group-row",
containment: "#example > tbody[data-group='" + group_index + "']",
opacity: 0.75
});
}
group_index++;
// add group-header before new group
$(rows).eq(i).before(
'<tbody data-group="' + group_index + '"><tr class="group-header"><td colspan="3">' + '- BRAND NAME: ' + group + '</td></tr></tbody>'
);
last = group;
}
// modify row and append to tbody
$(rows).eq(i).attr('data-group', group_index).addClass('group-row').appendTo("tbody[data-group='" + group_index + "']");
});
// make last group also sortable
$("#example > tbody[data-group='" + group_index + "']").sortable({
items: "tr.group-row",
containment: "#example > tbody[data-group='" + group_index + "']",
opacity: 0.75
});
// make the tbody-elements sortable and disable selection in table
$("#example").sortable({
items: "tbody",
placeholder: "tbody-placeholder",
forcePlaceholderSize: true,
opacity: 0.75
})
.disableSelection();
}
});
table.dataTable tbody tr.group-header {
cursor: move;
background-color: rgb(237, 208, 0);
font-weight: 700;
color: #006232;
}
table.dataTable .tbody-placeholder {
display: table-row;
height: 50px;
}
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<table id="example">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>Name1</td>
<td>Type1</td>
<td>13</td>
</tr>
<tr id="2">
<td>Name2</td>
<td>Type1</td>
<td>42</td>
</tr>
<tr id="3">
<td>Name3</td>
<td>Type2</td>
<td>33</td>
</tr>
<tr id="4">
<td>Name4</td>
<td>Type2</td>
<td>17</td>
</tr>
</tbody>
</table>

tabledit with datatable jquery

I am having issues with following 2 plugins working together. I am sure I am missing something but for love of God I cant see it :-(
$(document).ready(function(){
$('#mytable').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : false,
'info' : false,
'autoWidth' : false,
'order' : [[ 0, 'asc' ]],
});
$('#mytable').Tabledit({
url: 'update.php',
columns: {
identifier: [0, 'id'],
editable: [[1, 'name'], [2, 'email']]
}
});
$('#edit-client').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : false,
'info' : false,
'autoWidth' : false,
'order' : [[ 0, 'asc' ]],
});
$('#edit-client').Tabledit({
url: 'update.php',
columns: {
identifier: [0, 'id'],
editable: [[1, 'name'], [2, 'email']]
}
});
});
As you can see I have 2 tables. One is called mytable and the other edit-client. Isuue Iam having is with second table. If i have one table(either one), everything is working fine. However , when i add second table, it wont work properly. Datatable works on both but Tabledit just on first one.Both tables are identical in both structure and data respectively.
Any help would be highly appreciated as iam stuck at the moment.
Thank you

you can check this:
$('#example').DataTable();
$('#example2').DataTable();
$('#example').Tabledit({
editButton: true,
removeButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'First Name'],[2, 'Last Name'],[3, 'Username', '{"1": "#mdo", "2": "#fat", "3": "#twitter"}']]
}
});
$('#example2').Tabledit({
editButton: true,
removeButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'First Name'],[2, 'Last Name'],[3, 'Username', '{"1": "#mdo", "2": "#fat", "3": "#twitter"}']]
}
});
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table class="table table-striped table-bordered" id="example">
<caption>
Click the table cells to edit.
</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<br><br>
<table class="table table-striped table-bordered" id="example2">
<caption>
Click the table cells to edit.
</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
First you need instance the datatable and next make this datatable editable..

One other thing to put in place is to make sure your js <script> is before the <body> tag. It should only be loaded after table rendering

Datatable Child Row

I am trying to recreate demo
My jsfiddle is here
Frontend Javascript
$(document).ready(function() {
$('#example').DataTable({
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [{
className: 'control',
orderable: false,
targets: 0
}],
order: [1, 'asc']
});
});
HTML
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th></th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
For unknown reason, the details row does not appear (neither does the +/- signs on the left most column)
What am I doing wrong?

You have two Problems:
You are not using the right libraries
You are using the responsive extension that hides automatically data based on the width. So you have to add more columns so the data overflows.
See the the updated JSfiddle.
Look at the used external resources to see the correct libraries to import.

trying to custom style datatables table

i am trying to modify the layout datatables generate by default. like move the filter search bar below and table length dropdown menu below and etc.. basically custom style the whole table but i cant understand how i can. i checked the documentation on the datatables website but cant seem to understand. below is my code:
html:
<table class="table table-bordered table-striped table-condensed" id="ray-table">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
</tbody>
</table>
JS:
$(document).ready(function() { /* Build the DataTable with third column using our custom sort functions */
$('#ray-table').dataTable({
"aaSorting": [[0, 'asc'], [1, 'asc']],
"aoColumnDefs": [
{
"sType": 'string-case',
"aTargets": [2]}
]
});
});

Use the sDom options, something like:
$('#ray-table').dataTable( {
"aaSorting": [ [0,'asc'], [1,'asc'] ],
"sDom": "<tlfrip>",
"aoColumnDefs": [
{ "sType": 'string-case', "aTargets": [ 2 ] }
]
} );

Develop Reference

JavaScript is the programming language of the Web.

DataTables iniating multiple child tables with columnDefs intact - javascript

Related

How to sort a jQuery DataTables table using a separate column?

Jquery Datatable drag and drop with row grouping

tabledit with datatable jquery

Datatable Child Row

trying to custom style datatables table

Categories

Resources