i tried the Tabledit plugin for jquery. It works fine. But if I want to make an edit field as a select field it doesn't work. The edit field is also shown as an text input field and not as a select field. What Im doing wrong.
$('#mytable').Tabledit({
columns: {
identifier: [0, "id"],
editable: [
[1, 'car'],
[2, 'color', '{"1": "red", "2": "green"}']
]
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-tabledit#1.0.0/jquery.tabledit.min.js"></script>
<table id="mytable">
<thead>
<tr>
<th>id</th>
<th>Car</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ferrari</td>
<td>Red</td>
</tr>
<tr>
<td>2</td>
<td>Lotus</td>
<td>Green</td>
</tr>
</tbody>
</table>
Related
I have a table with multiple columns. 1 column contains date in format dd.mm.yyyy (example: 26.05.2021). I'm trying to achieve a default sorting by date.
My table looks like this:
<table id="myTable" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text.</td>
<td>25.06.2021</td> <!-- This is the date column I want to sort by -->
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text</td>
<td>22.07.2020</td> <!-- This is the date column I want to sort by -->
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
So far, I have this JS at the end of my <body> in my HTML file:
<script type="text/javascript" href="https://cdn.datatables.net/plug-ins/1.10.25/sorting/date-eu.js"></script>
<script type="text/javascript">
$('#myTable').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.18/i18n/Slovak.json"
},
columnDefs: [{
type: 'date-eu',
targets: 1
}],
"order": [
[1, "desc"],
[2, "desc"]
],
"pagingType": "first_last_numbers"
});
</script>
The issue is, that this does not order the table correctly. It seems to be ordering only by the day (ignoring month and year), not by the whole date.
Any ideas how to proceed?
I have tried all the available answers I was able to find here and also on the DataTables forums, but there weren't any answers which would fix my issue...
Thank you
Because you have two different date/time formats in your table (one for the column 2 date and one for the column 3 time), I recommend using the ultimate date/time sorting plug-in.
You need these extra resources in the page header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
Then, in the body script, you can define the two formats you need:
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
Formatting options for those two strings are documented here as part of the moment.js library.
DataTables takes care of the rest.
It looks through the list of date/time formats you have provided and automatically fits the correct format to the relevant column data. It then uses that format to ensure the data is sorted chronologically, while leaving the display format unchanged.
A demo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text A</td>
<td>21.06.2021</td>
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text B</td>
<td>22.07.2020</td>
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
<tr>
<td>Some Text C</td>
<td>22.07.2020</td>
<td>15:59</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
$('#example').DataTable( {
order: [
[1, "desc"],
[2, "desc"]
],
} );
} );
</script>
</body>
</html>
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>
I'm trying to create a selectable table using bootstrap. Is there a way to select elements inside the cell without selecting the table row?
As per the code snippets below, is there a way to select the textbox without selecting the table row?
I'm trying to replicate the functionality of jqueryui/selectable
Thanks!
$(function() {
var $table = $('#table');
$table.on('click-row.bs.table', function(e, row, $element) {
alert("Row is selected");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td>Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td><input value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td>Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>
A simple stop propigation will do I think. Try:
$("input").click(function(e) {
e.stopImmediatePropagation();
});
$(function() {
var $table = $('#table');
$table.on('click-row.bs.table', function(e, row, $element) {
alert("Row is selected");
});
$("input").click(function(e) {
e.stopImmediatePropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td>Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td><input value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td>Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>
On the same note as the answer above by "I wrestled a bear once", you can just get the id of the selected field (considering you do have an id). I added one for demonstration purposes
$(function() {
var $table = $('#table');
$table.on('click', function(e) {
console.log(e.target.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td id="1">Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td id="2"><input type="text" id="userInput" value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td id="3">Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>
I'm not sure why you're using an external library for something this simple unless I'm missing something, this should do the trick..
$(function() {
var $table = $('#table');
$table.find("tr").click(function(e){
if('INPUT' === e.target.tagName) return;
var sel = 1==$(this).attr('data-selected');
$(this).attr('data-selected', sel?0:1);
$(this).find('td').css('background-color', sel ? "" : 'green');
console.log(getSelections());
});
function getSelections(){
var vals = [];
$table.find("tr[data-selected='1']").each(function(){
var ele = [];
$(this).find('td').each(function(){ ele.push($(this).text()) })
vals.push(ele);
});
return vals;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td>Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td><input value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td>Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>
I am getting the below error when I use the jQuery data table.
Error: Unable to get property 'mData' of undefined or null reference
Code
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#empTable').DataTable();
} );
</script>
<table id="empTable" class="display" width="100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>AAAAA</td>
<td>32</td>
<td>Colombo</td>
</tr>
<tr>
<td>BBBBB</td>
<td>29</td>
<td>Kandy</td>
</tr>
</table>
Please suggest me how to fix this issue?
Your html structure is not proper, you need to have a thead element where the header is specified and the content should be in tbody.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>
HTML structures in the table needs to match.
For instance, <th> tags in your <thead> with the <tr>'s in the <tbody>. That is, if in the table you expect 5 columns , there should be 5 <th> tags in the table head and 5 <tr> tags in the table body.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>