Clever Geek Handbook

Datatables Custom Column Search Incompatible with Rollout

I am using Datatables to display over a thousand rows of a table. I am using custom column search to find specific columns. I am initializing the table with:

var table = $('#example').DataTable( {
        "scrollX": true,
        "scrollY": "400px",
        "paging": false
    });

However, when I search for a column, the second left column is overflowed with the first (fixed) one. (See the figure below.)

the company field is partly behind the username

I suspect this is because the reassignment of the column widths after each search: the first column also contains longer usernames, but after the search it has a smaller width.

I tried to set the right margin to the first column but it didn't help.

Any ideas how to solve this?

Please find a jsfiddle to demonstrate the problem here . You should be looking for a career for "J".

+3


source to share


2 answers


This problem has long been known as data maintenance. (see thread ) The issue has already been fixed with this changeet and is said to be due to:

When scrolling is enabled and column visibility is switched to Javascript an error would occur due to the method of cloning the column width of the wrong header element.



Datatables latest nightly version has already been fixed, however the fix is ​​two lines that can be easily added to the current version as well.

Note that ColVis, individual column lookups, and fixed columns were affected by this issue.

+1


source


Datatables recalculates column width after Ajax rendering, so I think that's normal behavior, but for your case, you can prevent overflow by eliminating



new $.fn.dataTable.FixedColumns( table );
0


source






More articles:


All Articles