The processing part overlap with the column headers

ChuckLu

Link to test case: https://live.datatables.net/koqiwave/2/edit
Debugger code (debug.datatables.net): nothing
Error messages shown: nothing
Description of problem: as we have the css style

div.dataTables_processing {
  position:absolute;
  top:50%;
  left:50%;
  width:200px;
  margin-left:-100px;
  margin-top:-26px;
  text-align:center;
  padding:2px;
  z-index:10
}

I suppose the processing part show beneath the column headers.

I already found this issue was introduced by the parent positioned element

function findPositionedAncestors(element) {
const positionedAncestors = [];
let currentElement = element;

while (currentElement !== null) {
const computedStyle = window.getComputedStyle(currentElement);
if (computedStyle.position !== 'static') {
positionedAncestors.push(currentElement);
}

currentElement = currentElement.parentElement;
}

return positionedAncestors;
}

const userListTableProcessingElement = document.getElementById('example_processing');
const positionedAncestors = findPositionedAncestors(userListTableProcessingElement);
console.log(positionedAncestors);

The latest positioned parent element is

<

div class="row dt-row">, and it seems this is generated by datatables.
and the dt-row style as
div.dataTables_wrapper div.dt-row {
position:relative;
}

So the processing part top 50% take effect on

<

div class="row dt-row">, which make it overlap with the column headers.
Is this correct behavior? I am not sure how to fix it, as the

<

div class="row dt-row"> is automatically generated

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I'm not 100% clear on what is wrong with the test case. It appears to render as I would expect it to:

Could you clarify what I've missed please?

Thanks,
Allan

ChuckLu

Hi @allan ,
The processing part, the three blue dots overlap the column headers. It supposed to show at the data part.
I just realized that the height of the table is 0 before the data is loaded. That's the reason why the top 50% does not work.
Do you know how can I set a default height of the table, which can make the processing icon move down?

ChuckLu

From the above screenshot, the pagination should locate at the third rectangle instead of second rectangle.

allan

DataTables shows a loading string when it is loading data, which can be seen in my screenshot. I'd need a test case showing the issue to be able to understand fully what is going wrong please.

Allan

ChuckLu

Hi @alan,
The position of pagination should at place 2 instead of place 1. Do you know how to make it work?

kthorngren

I'm not clear if you are asking one or two questions.

Do you know how can I set a default height of the table, which can make the processing icon move down?

Maybe setting the height of the cell displaying the Loading... message, for example:

td.dataTables_empty {
  height: 200px;
}

The position of pagination should at place 2 instead of place 1. Do you know how to make it work?

If you are wanting to place the paging buttons outside of the Datatables container you will need to move it using initComplete, for example:

$('#example_paginate').detach().appendTo("#destination");

See the updated example:
https://live.datatables.net/koqiwave/15/edit

Kevin

kthorngren

Another option is to override the top CSS with a value you want, for example:

div.dataTables_processing {
  top:80%;
}

Example:
https://live.datatables.net/koqiwave/17/edit

Kevin

ChuckLu

Hi @kthorngren ,
When I mentioned the pagination part, I actually mean that I want the table has height, such as 100px as you mentioned. Then 50% of processing part will locate at the 50px.
Currently the height of table maybe 0px? which make the top 50% at 0px position of table, and overlap the column headers.
td.dataTables_empty { height: 200px;}, I will try this solution, thanks.

ChuckLu

Hi @kthorngren ,
The solution you provided works for the above sample, but it seems the datatables behave differently. I can not find td.dataTables_empty class in following example
https://live.datatables.net/gihelego/4/edit

allan

It looks like there might be an error in DataTables that causes the empty / loading message not to display when server-side processing (serverSide) is enabled. I'll look into that.

Allan

ChuckLu

@allan Please leave a comment here when you find the root cause and fix it.

ChuckLu

Hi @allan,
You are right, the issue caused by serverSide option, I removed this option, the processing icon will not overlap the column headers
https://live.datatables.net/gihelego/5/edit

However we need the serverSide option, and I also find https://datatables.net/examples/data_sources/server_side has same issue, the processing icon overlap the column header in this sample page.

ChuckLu

Hi @allan,
Any update on this?

allan

I've just been looking into this and apparently it has been this way for a long time now (at least since 2014). I suspect my thinking at the time was that the "Processing" display was shown, therefore there was no need to display the "Loading..." row as well. That isn't going to be the case if the processing option isn't enabled though.

What I've done is to change things a little so that the "Loading..." text will be shown. This has been committed on the DataTables 2 branch which is currently in development and should land in January.

Allan

ChuckLu

Hi @allan,
Thanks for your efforts, I just wonder that if the datatables have the nightly build version.
As lots of open source project now has a nightly build version, which can be used for testing purpose. The following two projects both provide nightly build, and list source for nightly build on README.md.
https://github.com/Microsoft/TypeScript/tree/main
https://github.com/kerryjiang/SuperSocket

ChuckLu

I found this file http://nightly.datatables.net/js/jquery.dataTables.js, which branch does this nightly version map to? The code does not match https://github.com/DataTables/DataTablesSrc/commits/2, do you have a nightly version for branch 2?

colin

No, there's no nightly version yet as it's still in development. We hope it'll be released early in the new year

Colin