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
Related
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>
Basically, I want to achieve this command upon initialization of my dataTables.
$('#trainings-table').DataTable().column('status:name').search('planned').draw();
So, what I've tried:
$('#trainings-table').DataTable({
columnDefs: [{
targets: 'status:name',
search: 'planned'
},
]
})
But this didn't work. I also tried changing the target to the exact column number (e.g. targets: 2) and not using this named target, but that didn't seem to be the problem.
My DataTable:
<table id="trainings-table">
<thead>
<tr>
<th data-name="name">description</th>
<th data-name="status">Status</th>
<th data-name="date">date</th>
<th date-name="duration">days</th>
</tr>
</thead>
<tbody>
<!-- Expected behaviour: This row below should be hidden after initialization -->
<tr>
<td>Training 1</td>
<td>Completed</td>
<td>28.04.2019</td>
<td>1 day</td>
</tr>
<!-- Expected behaviour: Only show row below after initialization -->
<tr>
<td>Training 2</td>
<td>Planned</td>
<td>05.05.2019</td>
<td>2 days</td>
</tr>
...
</tbody>
</table>
You need to set name property with columns or columnDefs option.
Here is the code example:
$(document).ready(function () {
var table = $('#trainings-table').DataTable({
dom: 't',
columns: [
{name: 'name'},
{name: 'status'},
{name: 'date'},
{name: 'duration'}
],
searchCols: [
null,
{search: 'Planned'},
null,
null
]
});
});
<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>
<table id="trainings-table">
<thead>
<tr>
<th data-name="name">description</th>
<th data-name="status">Status</th>
<th data-name="date">date</th>
<th date-name="duration">days</th>
</tr>
</thead>
<tbody>
<!-- Expected behaviour: This row below should be hidden after initialization -->
<tr>
<td>Training 1</td>
<td>Completed</td>
<td>28.04.2019</td>
<td>1 day</td>
</tr>
<!-- Expected behaviour: Only show row below after initialization -->
<tr>
<td>Training 2</td>
<td>Planned</td>
<td>05.05.2019</td>
<td>2 days</td>
</tr>
</tbody>
</table>
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/
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.
I'm trying to use: https://github.com/markcell/jquery-tabledit/blob/master/README.md, and have it set up so its sending data to the form, unfortunately it currently not including the identifier in the form post, an would be grateful for any help.
I'm using the example on the website:
HTML Code:
<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>
$('#example').Tabledit({
url: 'example.php',
editButton: false,
removeButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'First Name'],[2, 'Last Name'],[3, 'Username', '{"1": "#mdo", "2": "#fat", "3": "#twitter"}']]
}
});
The only data in the post is the field that was edited and the action. Any help getting the identifier into the post would be most grateful. as you can tell new to this.,
I just had the same problem, but I figured it out. Are you using an older example or from another website? I recognise it from looking for in-line editors, but I can't find it again.
Anyway, you want to change
<th scope="row">2</th> to <td scope="row">2</td>
Looks like you have to keep <th> in the header (where it supposedly belongs)