Create a table a second time (after deleting) will not work.
Create a table a second time (after deleting) will not work.
Link to test case:
https://got-tools.com/en/app/analyze.html
But is just for registered users but you can adde me on Discord and i will show it: paykomanvll
Description of problem:
I showed you on the JS code how is my way to create the table.
The table (DOM) will be removed if the inline window are closed. But the users can click the "Add button" and the table will be created again.
My goal was to start always by zero and create a fully new instance.
The problem is the columns are broken, the table head cols has not the same size and the first col is anymore fixed !
If i resize the browser any event will be fired and then the table works fine, maybe any can tell me how i can fire the resizefunction manually? I tryed by the draw() functions but dont solved my problem
Description of problem:
function createEvalForm(){
// create member table
var table = $('<table>', {id: 'memberlist', class: 'cell-border', cellspacing: '0', width: '100%'}),
parts = evalForm[opt.section](evalMember); // return array with table parts [thead, tbody, tfoot]
// parse botnames of each member - AFTER the members was parsed so we can use his row on each botname
// this create the table rows
evalMember.forEach(function(member){
if( member.bname === null ){ member.bname = ''; }
member.bname.split(',').forEach(function(bname){
opt.textNodes[bname] = opt.textNodes[member.name]; // botname get the same node as real name
});
});
$('#newEva').append( $('<form>', {id: 'sendEval', class: 'saveEval', method: 'post', action: location.href})
.append( $('#saveEvalmenu').append( (parts[3]) ? $('#modeSelector') : null) )
.append(table.append(parts[0]).append(parts[1]).append(parts[2])) // add header, body and footer to the table
.append(
$('<div>', {class: 'text-center'})
.append( $('<button>', {type: 'submit', 'data-cmd': 'add', 'data-id': 'NA', 'data-token': 'NA', text: txt.get('al', 'save')}).button() )
)
.append( $('<input>', {type: 'hidden', name: 'process', value: 'saveeva'}) )
);
// create dataTable
var targets = [];
for( let i = 1; i < parts[0].find('th').length; i++ ){ targets.push(i); }
memberTable = new DataTable('#memberlist', {
destroy: true, // destroy old instance if exist one
fixedHeader: true,
fixedColumns: true,
scrollX: '100%',
scrollY: '450px',
bPaginate: false, //hide pagination
bInfo: false, // hide showing entries
columnDefs: [{targets: targets, "searchable": false, "orderable": false}]
});
}
I would be very happy if anyone can help me.
Thank you.
PS: very great plugin
Replies
Do you get errors in the browser's console?
Possibly you will need to use
destroy()
instead ofdestroy
. Maybe in the form close event or useDataTable.isDataTable()
in yourcreateEvalForm()
function and if true usedestroy()
.If you still need help maybe you can build a simple test case that shows you code flow using JS Bin:
https://live.datatables.net/
Kevin
I spend a lot of time to make the test case but the fixed col plugin dont work on it.
https://live.datatables.net/yozuzete/1/watch?html,js,output
The simplest way i think is add me on Discord (paykomanvll), then i can do screenshare and show code and result.
The thing is i already use this on the windows close function:
I tryed a new one, but same, it not solve the design are broken =(
It will not work, the header table is broken and the fixed col is not fixed.
Only after i resized the browser then all works fine.
So really, if anyone can contact me on Discord or Skype (paykomanvll) and help about this problem would be very nice.
::EDIT::
And again, if the windows open the first time all works fine, but if user close it and open again then its broken. And you see on both openings the same code would be executed. :-(
Sorry I don't have a Discord or Skype account. Possibly you can make arrangements with Allan for this type of support.
The load order was wrong. I moved the FixedHeader and FixedColumns CDN links below Datatables.js. The updated test case seems to be working:
https://live.datatables.net/ganokowi/1/edit
I toggled back and forth between
create
andclose
but didn't see any issues.Do you get errors in the browser's console? Do you see the Datatables elements like the search input?
That does seem strange. Possibly there is a timing issue where Datatables is initialized before the form is shown. In that case you will need to use
columns.adjust()
once the form is fully visible. See this tabs example.Kevin
okay make no sense but to put the new instance in a timeOut-function solved the problem.
I mean few lines above we can see the table will be appended to the DOM and on first time opening it work too only on after first opening not.
I did a timeout of 300ms to create the table instance it shoult to work.
grrrr, thank you for your time !!!
Like I said its possibly the form hasn't become visible when Datatables initializes. If Datatables initializes when hidden it can't accurately calculate the columns widths. It would be interesting to see if
columns.adjust()
works. Something like this:Kevin
yes it solved the problem too, i think this is the best way.
Thank you.