Link to test case: https://live.datatables.net/xehexoye/2102/edit
Hello, i am currently struggling with a z-index issue.
In the attached example the column 6 "Field 6" has a drop down as filter.
When the table data is scrolled (at a small window size), the drop down list is displayed behind the table data.
How can the drop down field also be shown when the table is scrolled?
Thanks and best regards,
Thomas
Link to test case:
https://live.datatables.net/bemoregi/5/
Description of problem:
DataTables 2 and Responsive 3.0.3 -- with multi-row headers are not displayed properly. If I remove dt-responsive from the <table>, all displays fine.
NOTE: We do not use Responsive that much with multi-row headers (only 2 tables) -- for those in question, I would also be ok with just changing them to be single-row headers -- as a workaround.
Hi
How may I update my scripts to use buttons in place of colvis.
If I just replace with the syntaxe of your example
" topStart: {
buttons: [
{
text: 'My button',
action: function (e, dt, node, config) {
alert('Button activated');
}
"
nothing works.
...
A part of my script:
$(document).ready(function() {
$('#datatables').DataTable( {
fixedHeader: true,
layout: { top1Start: 'buttons' },
buttons: [{ extend: "colvis",text: 'Display/Hide columns' }],
responsive: true,
pageLength: 10,
columnDefs:
...
Best regards.
Didier B.
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: i created a sample on generator but it doesn't appear correce. css feel is wrong. Why?
Link to test case: (pending)
Debugger code (debug.datatables.net): ejoxol
Error messages shown: none relating to DT
Description of problem: follows
Summary: Despite loading a format with DataTable.datetime(datefmt) + Luxon, a date column is still being sorted lexicographically
Background: I have inherited some questionable code. One of the things they were trying to do is sort a table's date column using an ancient version of DT (1.10.19) but that didn't work as they didn't handle the date column at all.
Context: I have updated the code to use DT 2.1.8 + responsive 3.0.3, plus Luxon and jQuery 3.7.1. Following the appropriate docs page I set DataTable.datetime() -- this is either "dd.MM.yyyy" or "MM/dd/yyyy". However in either cast the date column still sorts by the first number.
DataTable.datetime(DateFormatLuxon); // "dd.MM.yyyy" or "MM/dd/yyyy"
new DataTable("#eventTable", {
responsive: true,
autoWidth: true,
columnDefs: [
{
targets: "_all",
className: "dt-body-nowrap",
},
],
});
On a hunch I tried specifying a column type for the date column by adding a second entry to columnDefs but that broke sorting of that column- it would only 'sort' in data order or reversed.
I see no errors relating to DT in the console.
No fiddle/working example yet- as the main page demo and custom format example page do work I'm willing to bet something else is going on! I searched the forums and found some examples but none with a solution that presented itself.
Question: is there a way to debug how DT interprets the table? I am wondering if something odd is going on with eg column autodetection.
Thanks in advance!
Addendum: I could rewrite the code in question, eg to use ISO8601 dates, but the more bits touched the more cans of worms are opened- I am trying to apply the lightest touch possible at first!
Images:
Data order:
Asc:
Desc:
Link to test case: https://www.lasinistrapermonfalcone.it/pagamenti_comune/
Debugger code (debug.datatables.net): epoves
Error messages shown: DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see https://datatables.net/tn/1
Description of problem: running on MAMP environment with the same DB data all works fine. When in production (see url above) the search with some terms gives the invalid JSON response error and the response is void in network tab of inspector.
This happens searching in the right upper field terms like "marit" but "mari" works.
Another problematic term is "cuz" with the same error type.
I think there are a loto of terms that generate the error.
I repeat: the same situation but under MAMP works fine.
thansk a lot
$(".expand-all").click(function(e) {
e.stopImmediatePropagation();
var name;
collapsedGroups = [];
$(".dataTables_processing").show("fast", function() {
var _dataSrc = tableNew.rowGroup().dataSrc();
var tableArray = [];
var dataSrcArray = Object.keys(_dataSrc);
var aggregationIndex = 0;
_dataSrc.forEach(function(_dataSrcIndex) {
tableArray.push(tableNew.column(_dataSrcIndex).data())
})
//WE DON'T NEED TO EXCECUTE THE CHILDS, SO WE USE THE BELOW VARIABLE TO AVOID THE TIME CONSUME
for(j=0; j<tableArray.length; j++){
aggregationIndex = aggregationIndex +1;
//WE NEED TO ITERATE ONLY THE PARENT AND THE LAST CHILD
if(aggregationIndex == 1){
tableArray[j].unique().each( function ( name, index ) {
//WHEN THERE IS MULTIPLE AGGREGATION WE HAVE TO SHOW THE PARENT ROW
if(j>0){
for(k=0; k< tableArray[0].unique().length;k++){
var parent = tableArray[0][k];
collapsedGroups[parent+name] = false;
}
}else{
collapsedGroups[name] = false;
}
} );
}
}
nonNumericColumns(true,table_id,tableNew,groupColumn);
//$('#collapse-all').attr('id','collapse-partial');
$('.collapse-all').addClass('collapse-partial');
$('.collapse-all').removeClass('collapse-partial');
tableNew.draw(false);
console.log("Enter3");
/*tableNew.draw(false); */
$(".dataTables_processing").hide();
});
});
function nonNumericColumns(visibility,table_id,table,groupColumn){
var flagTable;
//var columns = $('#'+table_id).dataTable().dataTableSettings[0].aoColumns;
var columns = table.settings()[0].aoColumns;
var className = "";
var column = "";
$.each(columns, function(i,v) {
className = v.nTh.className;
column = v.idx;
if(!visibility){
if ((className.indexOf("numeric") < 0) && (v.sTitle != '')) {
table.columns( column ).visible( false );
}
}else{
column = v.idx;
table.columns( column ).visible( true );
}
});
//AGGREGATE COLUMNS NOT NEEDED TO SHOW
if(visibility){
table.columns( groupColumn ).visible( false );
}
//CALL PREHIDDEN WHEN WE EXPAND VIEWS - VISIBILITY TRUE MEANS EXPANDING VIEW
if(visibility){
preHidden(table,table_id,true);
}
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Hello! I’m in the early stages of writing my first book and considering using a book writing service to help with structure, editing, and polishing my ideas. I’m hoping to find a service that supports first-time authors and can guide me through the process from start to finish. Has anyone here used a professional book writing service before? If so, what was your experience, and do you have any recommendations? I’d love to hear about what worked, what didn’t, and any tips for choosing the right service. Thank you for sharing your knowledge and advice!
Link to test case:
https://live.datatables.net/sebeheco/1/edit
I use the example "Custom Filtering Options" with values modified to my output.
But my example gives me a different output:
Column 11( Prämie ) is not displayed
The same searchPanes are displayed for columns 4 and 5
Did I forget something or do something wrong?
If so, can you give me the correct entries?
Thanks for your help
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Link to test case: https://live.datatables.net/rerizaku/2/edit?html,js,output
Description of problem: I have an info with custom text, and works fine until I use the scroller plug-in.
The information is overwritten as long as I enable the scroller, and it also causes flickering (I guess this is due to the overwritten) when typing in the search bar (e.g., keep pressing aaaaaaaaaaaaaaaaaaaaaaa until there's no results to show and you can see the info is flickering).
You can comment/uncomment the line scroller: true to see the difference.
I guess this part or this part in the source code is the reason causing it.
Hello,
I have a serverSide implementation of a datatable and would like to build a custom excel export. In the datatable I've got an column search as well as an global search. There are also additional 3rd party search modifiers that are all passed into the ajax POST request and works seemleasly.
However, for my custom excel export, I would need to recreate this request and add additional needed params. Is ist possible to access/replicate the datatable ajax request with all its payload?
example code
var table = new DataTable('#example', {
processing: true,
serverSide: true,
ajax: { // the request would contain column infos / search, order, regex... etc
url: '/ssp/server_processing.php',
type: 'post',
data: (d) => {
d.additionl3rdPartyQuery = 'example 3rd party additional param' ,
},
},
});
buttons:[
{
text: 'Export button',
action: function ( e, dt, button, config ) {
// help needed here :
// do the ajax again but add another param to it
// maybe:
dt.ajax.data[] = { newParam : 'newParamData' }
dt.ajax.send
}
},
]
Here is my test case:
https://daado.altervista.org/avvisi_filzi_24-25.php
As you can see, when something is selected in the searchPanes, the subtotals are not shown.
I looked here for instructions but it doesn't seem to work.
Here is my script:
<script>
$(document).ready(function() {
var dt = $('#myTable').DataTable({
layout: {
top1: {
searchPanes: {
cascadePanes: true,
viewTotal: true
}
}
},
responsive: {
details: {
display: DataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Dettagli di ' + data[1] + ' (del ' + data[0] + ')';
}
}),
renderer: DataTable.Responsive.renderer.tableAll()
}
},
mark: true,
"iDisplayLength": 5,
buttons: [
'colvis',
{
extend: 'spacer',
style: 'bar',
text: 'Esporta i dati:'
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
className: 'btn btn-danger',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF',
download: 'open'
}
],
columnDefs:[
{
"targets": [8,13],
"orderable": false
},
{
searchPanes: {
cascadePanes: true,
viewTotal: true,
orderable: true
},
},
{
searchPanes: {
show: true
},
targets: [2,3,4,5,6,7,9,10,11,12]
},
{
searchPanes: {
show: false
},
targets: [0,1,8,13]
}
],
dom: 'Pfrtip',
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 0, 'desc' ]]
});
dt.on('select.dt', () => {
dt.searchPanes.rebuildPane(0, true);
});
dt.on('deselect.dt', () => {
dt.searchPanes.rebuildPane(0, true);
});
});
</script>
Link to test case:
https://live.datatables.net/sebeheco/1/edit
I use the example "Custom Filtering Options" with values modified to my output.
But my example gives me a different output:
Column 11( Prämie ) is not displayed
The same searchPanes are displayed for columns 4 and 5
Did I forget something or do something wrong?
If so, can you give me the correct entries?
Thanks for your help
This used to allow tabbing to skip over readonly columns in inline editor before I updated to v2 of dataTables, and 2.12 or keytable:
keys: {
columns: ':not(.readonly)',
keys: [ 9 ], /* tab key */
editor: vm.editor,
editOnFocus: true
} ,
Now the inline editor still lands on those columns when tabbing.
I updated all the extensions as well as css with bootstrap5.
Any advice?
Thanks
Link to test case:
https://live.datatables.net/parorale/1/edit
I have examined and copied the example at
https://datatables.net/extensions/fixedcolumns/examples/initialisation/api.html
but my result is not what is described. What could be the reason for this?
Link to test case: https://live.datatables.net/cuniyofe/2/
Debugger code (debug.datatables.net): utedud
Error messages shown: none
Description of problem: I have used “complex table headers” but have problems displaying content in responsive mode child rows. Instead of the column title, the input element from “table thead” element is displayed in the details view. Also, in the "Column visibility" dropdown menu, titles are not rendered they vanished after I added second “thead tr”.
I would appreciate any help.
Thanks.
I keep getting the error message shown below:
I am assuming that it is because the value for parameter 5 (item_id) is not surrounded by quotes, but I cannot figure out how to fix.
Thanks.
I have a number of fields in my editor that are formatted in the php file as follows:
Field::inst( 'TApplications.reqy1' )
->getFormatter( function ($val){ return $val == null? '' : number_format($val,2,'.','');}),
Field::inst('TApplications.reqy2')
->getFormatter( function ($val){ return $val == null? '' : number_format($val,2,'.','');}),
and so on up to reqy5.
So each field ends up as '3000.57' for example.
Then I have a read-only field ('totalrequested') that should add these fields together using the dependent() API:
appEditor.dependent(
['TApplications.reqy1', 'TApplications.reqy2', 'TApplications.reqy3','TApplications.reqy4','TApplications.reqy5'],
function (val, data, callback) {
appEditor.set( { 'TApplications.totalrequested':
appEditor.val('TApplications.reqy1') +
appEditor.val('TApplications.reqy2') +
appEditor.val('TApplications.reqy3') +
appEditor.val('TApplications.reqy4') +
appEditor.val('TApplications.reqy5') } );
return {};
}
);
But the field value is just a concatenation of the formatted numbers. I tried it without the formatting and the same happens.
I also tried converting the values of the 5 fields to numbers by wrapping them in 'Number()' but then the calculated field shows as 'NaN'.
Is there something obvious that I am missing here?