Missing `dt-type` classes on `th` and `td` elements for server-side implementations
Missing `dt-type` classes on `th` and `td` elements for server-side implementations
nanone
Posts: 3Questions: 1Answers: 0
Link to test case: https://datatables.net/examples/server_side/post.html
Description of problem:
After skimming through a bunch of the examples I've narrowed down the problem to what seems to be "server-side":
- All "server-side" examples initially render datatables
<th>
and<td>
elements withoutdt-type
classes. The initial alignment is therefore incorrect. - If the user sorts one of the columns, the
<th>
element will get adt-type
class, but the corresponding<td>
elements will not, therefore leading to a visually worse misalginment between header and colums cells.
Let's take 2 examples, one "server-side" and one other one type, where we will both look at the Salary
column.
-
- Here on first load we can see that the
<th>
element for theSalary
field has classesdt-orderable-asc dt-orderable-desc
. The<td>
elements under this column have no classes. - If we start to sort the column once, we see that
<th>
element has the classesdt-orderable-asc dt-orderable-desc dt-type-numeric dt-ordering-asc
, but the underlying<td>
element only has a sorting classsorting_1
. - The result: misalignment between
<th>
and<td>
elements for this column.
- Here on first load we can see that the
-
- Here on first load we can see that the
<th>
element for theSalary
field has classesdt-orderable-asc dt-orderable-desc dt-type-numeric
. The<td> elements under this column have
dt-type-numeric` classes. - If we start to sort the column once, we see that
<th>
element has the classesdt-orderable-asc dt-orderable-desc dt-type-numeric dt-ordering-asc
, and the underlying<td>
element havedt-type-numeric sorting_1
classes. - The result: correct alignment between
<th>
and<td>
elements for this column.
- Here on first load we can see that the
I hope this is enough information to further debug the problem.
This question has an accepted answers - jump to answer
Answers
Hi,
With my work on DataTables 2.1 I've been looking into exactly this issue. The key problem is that client-side data detection simply does not work when server-side processing is enabled. It can't ever work as it doesn't have the full set of data available for the column.
As a result I've intentionally disabled type detection for server-side processing. If you want classes such as
dt-type-numeric
for a column, then you can absolutely add them usingcolumns.className
, but that works because you have knowledge of the full dataset, which DataTables does not.Allan