We use the calendar for bookings. On click we have a logic to select the cells and mark a start and end date.
The user can click on two dates or use click and drag.
But after an event is already scheduled, the click or click and drag works everywhere in the cell except in the event container.
Is that the expected behavior?
Is there any workaround for that?
Here is a picture of the calendar.
Thanks.
Let me first thanks for this amazing table and all the links that datables share for free. Thank you very much!
I would like to ask for help if possible... my webpage with SemanticUI-2.2.13 makes a conflict with my right sidebar.
Please, could you help?
Debugg log at: https://debug.datatables.net/ilohak
Web page with right sidebar: https://htc-firmware.com/blog/
Thanks in advance!
Tried different options and tried to append the footerCallback output in DOM between Show All entries and Search option without any success. By any means is it possible. I want to remove footerCallback to be shown from footer and displayed at the top. This was necessary since I have All option enabled in Show All entries and when the entries are running in 1000's then viewing the footer become tedious.
Here is the testcase tried : http://live.datatables.net/mexefuxo/1/edit
Hi guys.
This easy and simple method to print images in tables.
Just change this code in your datatable.js
}
// Inject the table and other surrounding information
win.document.body.innerHTML =
'<h1>'+exportInfo.title+'</h1>'+
'<div>'+(exportInfo.messageTop || '')+'</div>'+
html+
'<div>'+(exportInfo.messageBottom || '')+'</div>';
$(win.document.body).addClass('dt-print-view');
$('img', win.document.body).each( function ( i, img ) {
img.setAttribute( 'src', _relToAbs( img.getAttribute('src') ) );
} );
if ( config.customize ) {
config.customize( win );
}
TO
}
// Inject the table and other surrounding information
var pageTitle = 'Page Title',
stylesheet = '',
win = window.open('', '', 'width=800,height=600');
win.document.write('<html><head><title>' + pageTitle + '</title>' +
'</head><body>' + $('.table')[0].outerHTML + '</body></html>');
win.document.close();
// Allow stylesheets time to load
_
thats all. so funny.
Hello everybody!
I'm newbie in datatables API and I'm found some issues to export data for Excel. The fist issue is that I need to whart text in same cell. for this topic I found a alternative solution passing the information as formula. The problem is I need to replace = to = to excel understand that I'm working with formulas and a I need to active the option in excel to wrap text in excel.
I tried to look in others topics but I didn't found a solution...
Below you can check my javascript code:
$(document).ready(function () {
$('#datatable').DataTable({
keys: true,
dom: 'Bfrtip',
lengthMenu: [
[10, 25, 50, -1],
['10 rows', '25 rows', '50 rows', 'Show all']
],
buttons: ['pageLength',
{
extend: 'excelHtml5',
autoFilter: true,
text: 'Export to Excel',
title: 'Pré Configurador',
exportOptions: {
format: {
body: function (data, row, column, node) {
//if it is html, return the text of the html instead of html
data = "=\"" + data.replace(/<br>/g, "\"&CARACTUNICODE(10)&\"") + "\""
data = remove_tags(data);
$(this).attr('s', '55');
return data;
}
}
}
}
]
});
});
Could you please helo me?
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Hi
I have given my code given below. I want to pass ID,EmployeeName,ClockedDatetoListas argument to the function from the clicked event of button . ShowDeleteModalPopup. Please can you help me with suggested code
var table= $('#tblData').DataTable({
"ajax": {
"url": "/Home/GetClockList?employeeid=" + $('#dropdownEmployee').val()
+ "&clockdate=" + $('#txtAttendanceDate').val() ,
"type": "GET",
"datatype": "json",
"dataSrc": function (json) {
return JSON.parse(json);
}
},
"columns": [
{ "data": 'ID', "width": "6%" },
{ "data": 'EmployeeName', "width": "20%" },
{ "data": 'ClockedDatetoList', "width": "20%" },
{
"data": "ID",
"render": function (data) {
return <div class="text-center">
<a class='btn btn-danger text-white' style='cursor:pointer; width:100px;' onclick="ShowDeleteModalPopup(${data})" >
<i class='far fa-trash-alt'></i> Delete
</a></div>
;
}, "width": "5%"
}
],
function ShowDeleteModalPopup()
alert(id);
$('#lblID').val(id);
$('#deleteConfirmationModal').modal('show');
}
Hello everyone,
I want to add edit and delete button on each row but i cant see my buttons. Here is my script,
<
script>
$(document).ready(function () {
$('#table').DataTable(
{
ajax: {
"url": "myurl",
"type": "GET",
"datatype": "json",
"dataSrc": "person"
},
aoColumns: [
{ mData: 'name' },
{ mData: 'surname' },
{ mData: 'email' }
],
className: "center",
defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
});
this is my links.,
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/datatables.min.css" />
I dont know why it is not working. Please help me 
I have a responsive datatable. It hides some cells, which is what it is supposed to do. I would now like to be able to show the hidden part of the first row of the table through a button click (so not by clicking on the plus-sign). Not sure how to go about this.
Hello friends, I am using DataTables with horizontal and vertical scroll bar with multiple data. It is pretty fine. But when I click onchange event for working my function(When click this function, show all data.), table layout is going to change and doesn't work my CSS code too. Please anyone can help? Sorry, if my question make you confuse.
hello
i want to Disable paging,ordering,info,search properties along with column definition like this
how can i do?
Hi all,
I need a last one features. Hope so. Unfortunately I cannot show it by fiddle, because the important part of the code, which is fine on my localhost destroys the table in fiddle. It's that "columnDefs" part, which is deactivated in fiddle. But this is the part my question deals with. https://jsfiddle.net/RoloTomasi/uqyrbv8h/23/
So the actual question is this one.
I'm able to deactivate the colums 11-21 as default. If someone wishes information e.g. for "Erzielte Tore pro Spiel", she should fade in the columns by using "Spalten ein/ausblenden". But with execution of this button only the colums are diplayed, the filter in the second row, doesn't have any effect.
Is there a poosibility to make them active like the other search columns?
Thanks in advance,
Rolo
When I log in to my WP site as Admin no problem to show the data from DataTable, but if I log in as Subscriber nothing works.
I only get this messages:
DataTables warning: table id=table_1 - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
I have tried to understand how to fix it, but can't understand it.
Is there anyone that can give me a hand.....
Hello, im getting an error while showing a table. Previous answers focus on the difference between column number in header
and in body. But ive counted the column numbers and its the same. I already tried showing just one column and still give error. Thank you in advance
<table id="object_list" class="display" style="width:100%">
<thead>
<tr>
<th>Municipio</th>
<th>Estaciones</th>
<th class="magna" style="color: white;">Promedio</th>
<th class="magna" style="color: white;">Maximo</th>
<th class="magna" style="color: white;">Minimo</th>
<th class="premium" style="color: white;">Promedio</th>
<th class="premium" style="color: white;">Maximo</th>
<th class="premium" style="color: white;">Minimo</th>
<th class="diesel" style="color: white;">Promedio</th>
<th class="diesel" style="color: white;">Maximo</th>
<th class="diesel" style="color: white;">Minimo</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/geo/municipios/27001/" target="_blank">Balancán</a></td>
<td>5</td>
<td>19.2</td>
<td>20.1</td>
<td>20.8</td>
<td>19.6</td>
<td>20.1</td>
<td>21.3</td>
<td>19.1</td>
<td>20.1</td>
<td>20.6</td>
<tr>
</tbody>
</table>
Hello everyone,
I am try to make edit/delete button on every row in my datatable. I am trying to make it with editor but when i add this editor part to my code it, i cannot see my table at all, only the titles show up. It gives me this
$.fn.dataTable.Editor is not a constructor
error. Here is my full code I am working with mvc.
@{
ViewBag.Title = "Login";
}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.1/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" />
<meta charset=utf-8 />
| name | surname | Edit / Delete |
|---|
@section scripts
{
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="//editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script>
var editor;
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
table: "#table",
fields: [{
label: "First name:",
name: "first_name"
}
]
});
$('#table').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.remove($(this).closest('tr'), {
title: 'Delete record',
message: 'Are you sure you wish to remove this record?',
buttons: 'Delete'
});
});
$('#table').DataTable(
{
ajax: {
"url": "myurl",
"type": "GET",
"datatype": "json",
"dataSrc": "person"
},
aoColumns: [
{ mData: 'name' },
{ mData: 'surname' },
{ mData: 'email' },
{ defaultContent: '<input type="button" class="Edit" value="Edit"/><input type="button" class="Delete" value="Delete"/>' }
],
});
$('#table tbody').on('click', '.Edit', function () {
alert("world");
});
});
</script>
}
@Html.ActionLink("Back to List", "Index")
`var genealogytable = $('#genealogy').DataTable({
destroy: true,
serverSide: true,
ajax:"reloadTab/?idsponsor=" + idsponsor + "&&period=" + period + "&&type=" + typee,
columns: [
{
data: null,
className: "center",
defaultContent: '<a href="javascript:void(0)" onclick="addRowGen(this.parentNode.parentNode.id)">' +
'<img src="{{ asset('img/add2.png')}}" width="30px"/>' +
'</a>'
},
{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, row){
return '<td> <p><label> <input type="checkbox" id="emailGenealog[]" name="email[]" class="check_mailGenealogy" onclick="mailRowGen(this.parentNode.parentNode.parentNode.parentNode.id)" name="" value="'+row.email+'" /><span></span></label></p> </td>';
}
//defaultContent: '<td> <p><label> <input type="checkbox" id="emailGenealog[]" name="email[]" class="check_mailGenealogy" onclick="mailRowGen(this.parentNode.parentNode.parentNode.parentNode.id)" name="" value="" /><span></span></label></p> </td>'
},
{data: 'Line'},
{data: 'Level'},
{data: 'associateid'},
{data: 'associatename'},
{data: 'Distributor_status' }
{data: 'email'},
{data: 'mobile_number'},
{data: 'alternative_number'},
{data: 'country'},
{data: 'PinRank'},
{data: 'PayRank'},
{data: 'InactiveMonths'},
{data: 'RenewalDate', type:"text"},
{data: 'SignupDate', type:"date"},
],
rowId: function(a) {
return a.email +' '+ a.associateid;
},
"columnDefs": [
{
"targets": 2,
className: "text-right line_number",
},
{
className: "level text-right",
"targets": 3
},
{
className: "associateid text-right",
"targets": 4
},
{
className: "associatename text-left",
"targets": 5,
"width": 80,
},
{
className: "distributor_status text-left",
"targets": 6
},
{
className: "email text-left",
"targets": 7
},
{
className: "mobile_number text-right",
"targets": 8,
"width": "10%"
},
{
className: "alternative_number text-right",
"targets": 9
},
{
className: "country text-left",
"targets": 10
},
{
className: "PinRank text-left",
"targets": 11
},
{
className: "PayRank text-left",
"targets": 12
},
{
className: "InactiveMonths text-right",
"targets": 13
},
{
className: "RenewalDate text-right",
"targets": 14
},
{
className: "SignupDate text-right",
"targets": 15
},
{
className: "periodo1 text-right",
"targets": 16
},
{
className: "periodo1 text-right",
"targets": 17
},
{
className: "periodo1 text-right",
"targets": 18
},
{
className: "periodo1 text-right",
"targets": 19
},
{
className: "periodo1 text-right",
"targets": 20
},
{
className: "periodo2 text-right",
"targets": 21
},
{
className: "periodo2 text-right",
"targets": 22
},
{
className: "periodo2 text-right",
"targets": 23
},
{
className: "periodo2 text-right",
"targets": 24
},
{
className: "periodo2 text-right",
"targets": 25
},
{
className: "periodo3 text-right",
"targets": 26
},
{
className: "periodo3 text-right",
"targets": 27
},
{
className: "periodo3 text-right",
"targets": 28
},
{
className: "text-right periodo3",
"targets": 29,
"width": "25%"
},
{
className: "text-right periodo3",
"targets": 30,
"width": "25%"
},
],
select: true,
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, 100 ],
[ '10 rows', '25 rows', '50 rows', '100 rows' ]
],
buttons: [
'pageLength',
{
extend: 'excelHtml5',
text: 'Excel',
titleAttr: 'Excel',
className: 'btn waves-light'
},
]
});`
Good afternoon (o;
Almost finished with the file uploading (o;
Let's say I display a table with just a few rows but want to be able to edit more columns that are displayed due to restricted display sizes...
Now my JSON returns also a "files" column which is not displayed in the table as many files can belong to a column.
But the editor seems to not like it when a column contains data which is not displayed, but in the JSON reply....
and the "Edit" button shows a spinning wheel forever and the console says:
uncaught exception: Unknown file table name: files
If the columns has no data then the editor dialog is launched...
thanks in advance
richard
Hi,
I've been looking for quite a while on the site, and I can't seem to find a way to tell the source of a select event. i.e. what triggered the event, a user click or an API call. The event objects seem to be identical.
Here's my situation - I'm syncronizing a leaflet map, with a datatable, each row in the datatable is a location on the map. I need to know if the user clicked on the table so that I can trigger the 'active' mode on the item in the map. This works fine by itself, I attach to the table.on('select', event, and send the map a message to update it's location.
BUT when I click on the map, I need to tell the table to select the corresponding row. Fine, I issue a table.row(id).select() API call, but that triggers the event - which updates the table, which you know the rest.
Sure - I can put some additional record-keeping in and probably get around this, but it seems really kludgy - I should be able to find the source of the event, and if it's undefined (in the case of an API call) I don't propegate further.
Any ideas? I can offer a patch to update this in the codebase if it doesn't exist.
Thank you!
Hello, i have a xhr-term.php file generate html <tr> like this :
echo '<tr>
<td>' . $value['ip'] . '</td>
<td>' . $value['nom'] . '</td>
<td>' . $value['site'] . '</td>';
if ($value['status'] == 'up')
{
echo '<td><span style="font-size: 1em; color: green;"><i class="far fa-arrow-alt-circle-up"></i></span></td>';
}
if ($value['muted'] == '1')
{
echo '<td><span style="font-size: 1em; color: red;"><i class="fas fa-microphone-alt-slash"></i></span></td>';
}
else{
echo '<td><span style="font-size: 1em; color: green;"><i class="fas fa-microphone-alt"></i></span></td>';
}
if ($value['battery'] == 'BATTERY_GOOD')
{
echo '<td><span style="font-size: 1em; color: green;"><i class="fas fa-battery-full"></i></span></td>';
}
else{
echo '<td><span style="font-size: 1em; color: red;"><i class="fas fa-battery-quarter"></i></span></td>';
}
echo '
<td>' . $value['state'] . '</td>
<td>' . secondsToTime($value['uptime']) . '</td>
</tr>';
i would like to use this as data source. I tried this :
function xhrterm(callback) {
$.ajax({
url: 'ajax/xhr-term.php',
success: function(callback) {
$('#table-visio').DataTable({});
$('#table-visio tbody').append(callback);
}
})
};
xhrterm();
It works but only for the first ajax call (idea is to do a SetInterval to update data every xx seconds) after i have a message telling me i cant reinit datatable.
I tried aswell to put $('#table-visio').DataTable({}); outside function but it doesnt work.
Iv read documentation about Ajax Datatable but i didnt find something usefull for me (or i don't understand how to make it works)
Can you please tell me the right way to update my datatable with my xhr-term.php ?
Thanks in advance.
Hello, I have dinamic tables and its rows always have in the first column a checkbox to select the entire row and its info.
My problem is that in a specific cell of every row, the data may be different, and depending on that, I have to " disable / prevent / forbid " the user to select that row.
I implemented the buttons: "Excel", "selectAll" and "selectNone"
Also implemented: "select-checkbox"
I use this: table.on('user-select', function (e, dt, type, cell, originalEvent)
and: e.preventDefault(); as a result when the value of cell is 'B'
also try: return false;
but is not working. The result is that as soon as the first 'B' option appears, the entire table disables clicking the checkbox of every row, no matter if it is 'A' or 'B', and clicking the 'Select All' button still works and checks everything, even the 'B' row, when it shouldn't.
So:
- if the cell data in a row is 'A', the user can use the checkbox by clicking the checkbox or click the 'Select All' button
- if it is 'B', the user can't use the checkbox, neither clicking on checkbox nor click on 'Select All' button
Hope you can help me, thanks in advance!!!
I'm currently working on a project that will load around 5000 entries with pictures and audio files. With only around 400 entries it already takes a while.
The link to the website is: http://humstaging.byu.edu/cambodianoralhistories
You can check the speed through inspecting the network.
I created a filter that loads all the data which might be a reason?
The code for the filter:
'''
jQuery(document).ready(function() {
var table = jQuery('#myTable').DataTable(
{
// "deferRender": true
}
);
jQuery.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseInt( data[6] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
jQuery.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
var gender = jQuery('input:checkbox[name="gender"]:checked').map(function() {
return this.value;
}).get();
if (gender.length === 0) {
return true;
}
if (gender.indexOf(searchData[8]) !== -1) {
return true;
}
return false;
}
);
jQuery.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
var birth = jQuery('input:checkbox[name="Birth"]:checked').map(function() {
return this.value;
}).get();
if ( birth.length === 0) {
return true;
}
if ( birth.indexOf(searchData[9]) !== -1) {
return true;
}
return false;
}
);
jQuery.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
var storys = jQuery('input:checkbox[name="story"]:checked').map(function() {
return this.value;
}).get();
var stories = searchData[7].split(',');
var text = "";
for (x in stories) {
text += stories[x] + " ";
}
if (storys.length === 0) {
return true;
}
for(var i=0;i<storys.length;i++){
if(text.includes(storys[i])==true){
return true;
}
}
return false;
}
);
// Event listener to the two range filtering inputs to redraw on input
jQuery('#min, #max').keyup( function() {
table.draw();
} );
jQuery('input:checkbox').on('change', function () {
table.draw();
});
} );
'''