CSS JQuery Datatable - Strange rendering

Question

I have a Datatable from datatables.net on which each rows can be selected with a click event on a checkbox. When the event is triggered, I add or remove a CSS class to change the look.

$(".cbDatatable").on('click', (function (evt) {
                    $(this).closest('tr').removeClass('selected');
                    evt.stopImmediatePropagation();
                }
                else {
                    $(this).closest('tr').addClass('selected');
                    evt.stopImmediatePropagation();
                }
            }));

The CSS class simply change the background color and add a little blue border en the left side of the row.

.selected{background-color: #fafafa; border-left: 4px solid #0e8ae8;}

This is working just fine.

The problem

But if I select the n+1 row and then the n+3 row, the n+2 row also render the border-left from the 'selected' CSS class whereas the class is not applied on it.

<body>
<tr class="odd selected" role="row">
<tr class="even" role="row">          <-- This one
<tr class="odd selected" role="row">
<tr class="even" role="row">
<tr class="odd" role="row">
<tr class="even selected" role="row">
</tbody>

It looks like that on every browsers. If I scroll, the border often bug like that.

Is it a bug ? Am I doing something wrong ?

What I tried to solve it

I looked in the DOM explorer and no CSS property is applied on the non 'selected' row to render the border-left
I tried to put the js function in the $datatable.on('draw.dt', function () {}); as well as in the $(document).ready(function () {});
In the DOM explorer, inactivate and reactivate an other CSS property of the non 'selected' row solve the rendering issue
I forced the reloading of all the CSS sources in the click function and it solved the rendering problem

Any advice would be very appreciated

can you please provide js fiddle link of your code if it is possible ? — Dipak Thoke
– Dipak Thoke, Commented Oct 24, 2016 at 5:36

Paweł Michalski · Accepted Answer · 2016-10-24 06:48:03Z

1

Adding border style for TR tag is not best idea. How about adding border style to first cell (in my example it's TD but it might be TH) in row with class ?

.selected td:first-child{
  border-left: 4px solid #0e8ae8;
}

Look at example - it only adds border where it should be: https://jsfiddle.net/6x2ubk00/

Should work same regardless if it's build manually or with Datatable

edited Oct 24, 2016 at 6:48

answered Oct 23, 2016 at 19:58

Paweł Michalski

2321 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paweł Michalski Over a year ago

Ups. Sorry. I've edited my answer and added working jsfiddle url

Skrface Over a year ago

It seams to solve the problem indeed, thank you very much.

Collectives™ on Stack Overflow

CSS JQuery Datatable - Strange rendering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related