2.3.8 clicks on .dt-column-order indicator register on wrong column for right-aligned headers

2.3.8 clicks on .dt-column-order indicator register on wrong column for right-aligned headers

jojoEMSjojoEMS Posts: 1Questions: 1Answers: 0

Stack: DataTables 2.3.8 + FixedHeader 4.0.6 + Responsive 3.0.8, Bootstrap 3 styling pack (datatables.net-bs 2.3.8 + -fixedheader-bs 4.0.6 + -responsive-bs 3.0.8), jQuery 3.6.0. Migrated from DT 1.10.16.

Setup: Table with 11 columns; columns 3–8 have className: 'text-right' for right-aligned numeric data. Column 9 has visible: false. Column 10 has orderable: false. Initial order: [[0, 'desc']].

Symptom: Clicking on the order indicator icon (.dt-column-order span) inside a right-aligned <th> registers as a click on the NEXT column (data-dt-column index + 1). Clicking on the column title text (.dt-column-title span) registers on the correct column.

Diagnostic from instrumented click handler (delegated on thead for th, fires before DT's own handler):

CLICK on Sales (data-dt-column=5), target=SPAN.dt-column-title, closest th=5 // text click — correct
CLICK on Adjustments (data-dt-column=6), target=SPAN.dt-column-order, closest th=6 // icon click on Sales' visual icon — WRONG, lands on Adjustments
Geometry inspection shows .dt-column-order for each column renders at the LEFT edge of its own <th> (e.g. Sales th boundary L=865/R=955, indicator L=873/R=885). Visually this places the indicator next to the right-aligned text of the previous column. When the user clicks what looks like Sales' indicator, it's actually inside Adjustments' <th>.

Expected: Click on .dt-column-order should sort the column whose <th> contains it (matches closest('th')).

Actual: The delegated handler reports closest('th') correctly, but DT's internal sort applies to a different column — suggests the issue is in event-target → column-index resolution inside DataTables itself when the click target is the order-indicator span.

Visual workaround that DOES fix click routing for icon-clicks on the same column (but introduces other regressions): CSS display:flex; flex-direction:row-reverse; on .dt-column-header for .text-right headers. This puts the indicator inside its own cell visually next to the right-aligned title text. After this fix, icon-clicks still misroute by +1, confirming the issue is not purely visual.

Happy to provide a minimal reproduction page.

Answers

  • allanallan Posts: 65,740Questions: 1Answers: 10,934 Site admin

    Happy to provide a minimal reproduction page.

    That would be great please.

    Thanks,
    Allan

Sign In or Register to comment.