Hi all, I am new to this community.
I had posted my first question 2-3 days ago. I edited out the question twice after submitting,the third time it was submitted to moderator for approval, I am not sure why. I cannot see the question in my profile nor does it show up anywhere as 'Pending Approval'. Is this an expected behavior?
Thanks!
Hi,
I am very new to the Datatables Editor, and have run into a very odd problem which I have tried to diagnose using the Chrome developer tools to follow the AJAX calls being made as per the Documentation.
I've been trying to create a parent/child page as per https://datatables.net/blog/2016-03-25, and seem to have got things working on my local server running PHP 7.1.
However when I run the code on my remote server, I get a problem with the Ajax call in the child datatable, specifically returning an internal server error when running the line:
xhr.send( options.hasContent && options.data || null );
inside JQUERY. This line of code returns "Failed to load resource".
The code inside the HTML file relating to the specified datatable looks like this:
var scenesEditor = new $.fn.dataTable.Editor({
ajax: {
url: 'tw_controllers/jb_places_scenes_join.php',
data: function (d) {
var selected = placesTable.row({selected: true});
if (selected.any()) {
console.log("A row was selected - scenes");
d.id_place = selected.data().tw_place.id;
console.log(d.id_place);
}
}
},
table: '#scenesTable',
placesTable refers to the Parent Table controlling what is shown in scenesTables which is the child table.
You can see there is a bit of debug code in there to make sure that the primary key from the Parent table has been set correctly - and it has.
I have checked that the database on the localhost is the same as the one on the remote host.
When this is run on the localhost it works fine.
When it is run on the remote server it fails.
I am pretty new to Javascipt, so am unsure how to proceed to figure out what's going on.
Thank you for any help.
JB
Hello,
When using datatable, the header row is placed in <thead> tag and the body in <tbody> tag, however, the CSS is not consistent with this, causing the checkbox not to be displayed in header. Not even the demo in this page works.
In CSS, this styles are defined:
table.dataTable tbody th.select-checkbox
which is wrong. It shoud be
table.dataTable thead th.select-checkbox
Furthermore, since in some cases (when using scroll plugin), datatable is rendered containing 2 divs, one with "dataTables_scrollHead" class and the other with "dataTables_scrollBody" class. Both with the table inside.
If the classes shown above are used, 2 header checkboxes will be shown, so, every line that contains ""th.select-checkbox" should be prefixed with ".dataTables_scrollHead" to fix it.
On the other hand, in order for the click to work, I had to do this in draw.dt event of the datatable:
$('.dataTables_scrollHead th.select-checkbox').on("click", function () {
if ($(".dataTables_scrollHead th.select-checkbox").hasClass("selected")) {
tabla.rows().deselect();
$(".dataTables_scrollHead th.select-checkbox").removeClass("selected");
} else {
tabla.rows().select();
$(".dataTables_scrollHead th.select-checkbox").addClass("selected");
}
}).on("select deselect", function () {
if (tabla.rows({
selected: true
}).count() !== tabla.rows().count()) {
$(".dataTables_scrollHead th.select-checkbox").removeClass("selected");
} else {
$(".dataTables_scrollHead th.select-checkbox").addClass("selected");
}
});
I hope you may think about fixing this in next release.
Thanks
Jaime
Before I made it instantaneous, I do not see what I can be doing wrong.
/**********************************************************************************/
$('#' + idTabla + '').DataTable({
processing: true,
serverSide: false,
order: [0, 'desc'],
paging: true,
language: lenguajePorDefectoEnGrilla,
data: response,
columns: nombreColumnas,
dom: 'Rlfrtip',
colReorder: { realtime: true },
"columnDefs": [
{
"render": function (data, type, row) {
return ("<span class='linkAProceso' onclick= 'irAVentanaProceso(" + +data + ")'>" + data + "</span>");
},
"width": "30px",
"targets": 0
},
{
"render": function (data, type, row) {
return ("<span class='" + data.toLowerCase() + "'>" + data + "</span>");
},
"width": "30px",
"targets": 1
},
{
"visible": false,
"searchable": false,
"targets": 2
}
],
//TODO:
//scrollY: "75vh",
//scrollX: true,
//scrollCollapse: true,
//fixedColumns: true ,// {leftColumns: 2 },
//--------------------------------------------------------------------------------------------------
"initComplete": function (settings, json) {
//Se inicializa la grilla luego de que termine de cargar el ajax, para que habilite todos sus Rows
//#region SetearEncabezadoExportar
let documentoElegido = ComboBox_DevolverItemsSeleccionados("cmbDocumentoProcesos");
let nombreDocumento;
if (documentoElegido.length) { nombreDocumento = documentoElegido[0].innerText; }
let subtitulo = "Documento/Proceso: " + nombreDocumento + "\t\t\t Fecha desde: " + fechaDesde + "\t\t\t Fecha hasta: " + fechaHasta;
Grilla_SetearEncabezadoParaExportar(idTabla, "Datos de Procesos", subtitulo, null, 'landscape');
//#endregion
CargarGrilla2(idTabla, "Español", "True", "True", "True", "True", "False", "", "True", lenguajePorDefectoEnGrilla, null, true);
DataTableDatosProcesos = $('#' + idTabla + '').DataTable();
var tablaVacia = $('#' + idTabla + '').find('.dataTables_empty');
if (tablaVacia.length == 1) { tablaVacia[0].innerText = "No se encontraron datos para el criterio de busqueda. " }
},
"rowCallback": function (nRow, data, iDisplayIndex) {
$(nRow).on('mousedown', function (e) {
if (e.button == 2) {
return false;
}
return true;
});
}
});
});
I'm configuring a datatable to use the slick multi-select option:
select: {
style: 'multi',
className: 'site-selected'
},
But within the datatable there's a link that opens in a new window, to allow someone to view the full record before deciding to select it. But clicking on that link also selects the row, making for a confusing experience for the user.
Basically I'd like to be able to indicate to datatables to NOT select the row when certain element types are selected. Is this possible? Or even exclude certain columns.
Thanks.
I have two datatable->select query and they are basically having the same columns, how to union them(combining them) and then spitting out $this->datatables->generate?
PS: Can datatables.net fix up their website? The UX is really bad. the documentation is hard to read and can not test out the options. The reading is dry and hard to understand. Just need a general fixing
I have two datatable->select query and they are basically having the same columns, how to union them(combining them) and then spitting out $this->datatables->generate?
I am wondering if data tables has the ability to compare the cells in two or more rows? ...
So, you could select many rows. execute the compare. (maybe datatables would ask what is the golden row?) then it would highlight which cells are not matched compared to the golden row cells.
Thanks!
I have a table using server-side processing that has some very customized formatting on mobile pictured here (with titles edited out because they have private information):
I use the search capability to get just the first one, and then I delete my search term and am left with this:
As you can see, after searching and removing the search term, I am left with two extra links to the Participants and Status pages that shouldn't be there. If you inspect them, they both look like this:
<td class=" min-tablet-l">
<a href="#">
<i class="fa fa-user-plus fa-3x"></i>
</a>
</td>
That class (min-tablet-l) should in theory keep that hidden. Would you have any ideas why this is happening and how to fix it? I can post more code if need be, but I think this is enough right now.
When i open the exported file, I get the below error
" We found a problem with some content in 'filename.xlsx'. Do you want us to try to recover as much as we can?"
This is how i am using datatable
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://nightly.datatables.net/buttons/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
"buttons": [
{
extend: 'excelHtml5',
title: "test",
filename: "testFile",
"createEmptyCells" : true,
sheetName: 'sheetName',
messageTop: "message",
customize: function( xlsx ) {
//my code
}
}
]
How to get rid of it? Please help me on this
My code is
<table class="table table-striped table-responsive" id="myDataTable">
<thead>
<tr>
<td>Question</td>
<td>Answer</td>
</tr>
</thead>
@foreach (var item in Model)
{
<tr>
<td>@item.SubStandardName</td>
<td></td>
</tr>
<tr>
<td>Test</td>
<td></td>
</tr>
}
<tfoot>
<tr>
<td>Question</td>
<td>Answer</td>
</tr>
</tfoot>
</table>
The output is as follows
Question Answer
Fire Defence Organisation
Housekeeping
Liquified Petroleum Gas (LPG) Installations
Test
Test
Test
Question Answer
I would like the output to be
Question Answer
Fire Defence Organisation
Test
Housekeeping
Test
Liquified Petroleum Gas (LPG) Installations
Test
Question Answer
Removing the datatable gives me this output
Please assist
Hello
I use API depedent() with field as an array like this ['capture.transponder', 'capture.eartag_left', 'capture.eartag_right'] and the event: 'focusout'.
I would like to know in the fetch wich field is focusout because i want to change class of this field in some cases.
How can i do this.
Thanks a lot.
Lionel
I have a simple implementation of DataTables with Bootstrap 4, for example at medieval-inquisition.huma-num.fr/MS609/list.
After much research I am not able to resolve two visual issues:
(BTW I mention and link DataTables in the "about" page of the site - I appreciate this product a lot!)
I'm trying to find a solution to hide an export CSV button if the table has more than 5000 rows. Someone could help? Thanks
there are no id's in the labels that wrap the Search input box making them difficult to target and remove.
the specific html is as follows:
<label>Search:<input type="search" class="" placeholder="Search Valley Members..." aria-controls="VOTERdirectory"></label>
I want to remove the label tags or leave them but remove the word Search:
I've attempted to target these labels and remove them like so:
var $label = document.getElementsByTagName("INPUT")[0].closest("label");
$label.replaceWith(document.getElementsByTagName("INPUT")[0]);
Although this works, it doesn't work in all browsers.
I can't stand hacking core files as this makes maintenance difficult.
Any suggestions on how to remove this would be greatly appreciated.
If I might make a suggestion for future releases:
have unique id's for all elements, and don't wrap elements that don't need to be wrapped.
e.g. change:
<label>Search:<input type="search"></label>
to
<label id="label_001">Search:</label><input type="search">
so that once they are identified they can be targeted and removed without removing the inner elements.
maybe I'm missing the forest for the trees.
Any suggestions?
data ajax loading and empty data
When data loading is complete
I am working on a project using bootstrap datatable. I dont know that how to change font size of excel export
Hi following is my code, trying 2 get the .row() function working but it keeps returning the not a function error. I could not find any related problems.
`
$(document).ready(function () {
// Get the base table element.
const eventTable = $('#myTable');
// Initialize the datatable element.
eventTable.DataTable({
ajax: '../myjson.json',
paging: false,
info: false,
language: {
search: '',
searchPlaceholder: 'naam evenement',
},
columns: [
{ "data": "link" },
{ "data": "image" },
{ "data": "event" },
{ "data": "type" },
{ "data": "organiser" },
{ "data": "date" },
{ "data": "time" },
{ "data": "venue" },
{ "data": "city" },
],
columnDefs: [{
"targets": 0,
"visible": false,
"searchable": false,
"data": "link",
}]
});
// Attach the search filter to the filter section.
$('div.dataTables_filter').appendTo($('.filter'));
// Attach the click events.
eventTable.on('click', 'tr', function () {
let row = $(this);
if (row.hasClass('selected')) {
row.removeClass('selected');
}
else {
$('#myTable tr.selected').removeClass('selected');
row.addClass('selected');
let linkData = $('#myTable').row(row).data();
console.log(linkData);
}
});
});
`
Hello,
i'm using datatables editor with the buttons 'new', 'edit' and 'delete'. The button 'new' is enabled all the time and the buttons 'edit' and 'delete' are only enabled if a row is selected. This all works fine.
My problem:
I have the column 'active' in my table. It contains the value 0 or 1, which represent the status 'not active' and 'active'. Now i want to extend the function of the 'delete'-button, that it will only be enable if a row is selected AND the value in the column 'active' is 0. If the 'active'-value is 1, the 'delete'-button can't be enabled.
How can i do this?
Thanks a lot for your help.
Hi,
If I am using a 3rd party plugin to translate my page, how can I get the datatable to export the data in the chosen languag e.g If i translate my page to German and I export the datatable to excel, it's exported in English (I would like to have it in the chosen language "German").
Thanks