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

nanonenanone 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":

  1. All "server-side" examples initially render datatables <th> and <td> elements without dt-type classes. The initial alignment is therefore incorrect.
  2. If the user sorts one of the columns, the <th> element will get a dt-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.

  • "POST"

    • Here on first load we can see that the <th> element for the Salary field has classes dt-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 classes dt-orderable-asc dt-orderable-desc dt-type-numeric dt-ordering-asc, but the underlying <td> element only has a sorting class sorting_1.
    • The result: misalignment between <th> and <td> elements for this column.
  • "AJAX data source arrays"

    • Here on first load we can see that the <th> element for the Salary field has classes dt-orderable-asc dt-orderable-desc dt-type-numeric. The <td> elements under this column havedt-type-numeric` classes.
    • If we start to sort the column once, we see that <th> element has the classes dt-orderable-asc dt-orderable-desc dt-type-numeric dt-ordering-asc, and the underlying <td> element have dt-type-numeric sorting_1 classes.
    • The result: correct alignment between <th> and <td> elements for this column.

I hope this is enough information to further debug the problem.

Answers

  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

    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 using columns.className, but that works because you have knowledge of the full dataset, which DataTables does not.

    Allan

Sign In or Register to comment.