Error: th invisible and td visible, damaging the response structure
Error: th invisible and td visible, damaging the response structure
LuccasGaulia
Posts: 10Questions: 0Answers: 0
Folks,
Colvis and responsive are working, but td does not disappear when you open a number of columns, only td, stretches the screen, damaging the table
https://gaulia.eng.br/gestao/index2.php?page=collaboratorsList
var table = $('#myTable').DataTable( {
dom: 'Bfrtip',
processing:true,
serverSide:true,
ajax:{
"url": "php_action/collaboratorsAllTable.php",
"type":"POST"
},
responsive: true,
bFilter: true,
deferRender: true, // Renderizar rapidamente
columns: [
{ data: 'user_id' },
{ data: 'action',
"data": null,
"render": function (data, type, row) {
var status;
if(data.status === "2"){
status = 'on';
}
else{
status = 'off';
}
},
{ data: 'first_name'},
{ data: 'last_name' },
{ data: 'gender',
"defaultContent": "",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if("1"==sData){
$(nTd).html("<i class='fas fa-mars ze-icon-m'></i>");
}
else if("2"==sData){
$(nTd).html("<i class='fas fa-venus ze-icon-m'></i>");
}
else{
$(nTd).html("<i class='fas fa-venus-mars ze-icon-m'></i>");
}
}
},
{ data: 'birth_date' },
{ data: 'breed',
"defaultContent": "",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if("1"==sData){
$(nTd).html("Branca");
}
else if("2"==sData){
$(nTd).html("Negra");
}
else if("3"==sData){
$(nTd).html("Parda");
}
else if("4"==sData){
$(nTd).html("Amarela");
}
else if("5"==sData){
$(nTd).html("Indigena");
}
else{
$(nTd).html("Não definido");
}
}
},
{ data: 'naturalness' },
{ data: 'document_1' },
{ data: 'document_2' },
{ data: 'document_3' },
{ data: 'document_4' },
{ data: 'document_5' },
{ data: 'document_6' },
{ data: 'name_dad' },
{ data: 'name_mom' },
{ data: 'description' },
{ data: 'status',
"defaultContent": "",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if("2"==sData){
$(nTd).html("<i class='fas fa-toggle-on ze-icon-m'></i>");
}
else{
$(nTd).html("<i class='fas fa-toggle-off ze-icon-m'></i>");
}
}
}
],
columnDefs: [
{
"targets": [ 0 ],
"orderable": false,
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "user_id"
},
{
"targets": [ 1 ],
"responsivePriority": 1,
"orderable": false,
"visible": true,
"searchable": false,
"data": "action"
},
{
"targets": [ 2 ],
"responsivePriority": 2,
"visible": true,
"searchable": true,
"data": "first_name"
},
{
"targets": [ 3 ],
"visible": true,
"searchable": true,
"data": "last_name"
},
{
"targets": [ 4 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "gender"
},
{
"targets": [ 5 ],
"visible": true,
"searchable": true,
"className": "ze-center",
"data": "birth_date"
},
{
"targets": [ 6 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "breed"
},
{
"targets": [ 7 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "naturalness"
},
{
"targets": [ 8 ],
"visible": true,
"searchable": true,
"className": "ze-center",
"data": "document_1"
},
{
"targets": [ 9 ],
"visible": false,
"searchable": true,
"className": "ze-center",
"data": "document_2"
},
{
"targets": [ 10 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "document_3"
},
{
"targets": [ 11 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "document_4"
},
{
"targets": [ 12 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "document_5"
},
{
"targets": [ 13 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "document_6"
},
{
"targets": [ 14 ],
"visible": false,
"searchable": true,
"className": "ze-center",
"data": "name_dad"
},
{
"targets": [ 15 ],
"visible": false,
"searchable": true,
"className": "ze-center",
"data": "name_mom"
},
{
"targets": [ 16 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "description"
},
{
"targets": [ 17 ],
"visible": false,
"searchable": false,
"className": "ze-center",
"data": "status"
}
],
buttons: [
{
extend: 'colvis',
text: '<i class="fas fa-columns ze-icon-gg"></i>',
titleAttr: 'Alterar Colunas Visiveis',
"columns": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
},
{
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Replies
Can you give steps on how to reproduce the error, please. I'm looking at your site but not sure what to do next!
Colin
Choose the options of adding a column in the "den" until the table is enlarged, you will identify that it enables the responsive, the excessive column, th is invisible, but td does not, pushing the limit of the table
https://gaulia.eng.br/gestao/img/img.png
View image
I'm not seeing that blue plus button:
We're happy to help, but we need to know how to reproduce the issue.
Colin
To reproduce the problem just open more columns using Colvis to the maximum, after that it opens the responsive, but the column (td) is not invisible only to (th)
Your website is very difficult to navigate. Please can you provide steps on how to reproduce, I've tried again and there are too many icons to make sense of. Please just say "1 click here, 2 click there"...
Colin
Steps:
1) Open colvis (column expansion icons);
2) Select all invisible columns;
3) It will be verified that the responsive icon opens in the first column, but the table extends beyond the original format of the table.
https://gaulia.eng.br/gestao/img/error.png
I took a look but did not find the problem. Its easy to see if you shrink the browser so it looks like this:
Notice 5 columns are displayed. Click on the Colvis button and select the 4th option down (Genero):
Now you will see 6
td's shown but still only 5 header columns.The symbol is inserted in tho the -tag tr`. Not sure why this is happening.
Kevin
Yes, the "tr" are correct, becoming invisible, the "td" who should accompany the "tr" and are not doing this
Thanks Kevin, I took a look again and it looks like something's broken on the table - it's giving this error:
From the table initialisation above, that should be
name_dad. Could you fix that please. I did see the error this time, thanks for those steps, Kevin, I'll take another look once the table loads without errors.Colin
This error was now, it does not change the problem of the columns, it is not invisible and appears in the "+" responsive.
As informed, the TRs are left with the display: none when it reaches the size limit, while the TDs are not added the display none to accompany the TRs.
Do you understand?
I saw something like:
https://gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs/
Solution in TAB
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$($.fn.dataTable.tables(true)).DataTable()
.scroller.measure();
});
But in my case it's not within TAB
I got it,
work on CollumsDef making everyone visible, simple and it took me a long time to see ...
Sorry