How to stop YADCF Filters in Datatables to mess with the headers cell width

问题

When I add some YADCF filter to the datatable the resizing of the columns get messed up (as seen in te pictures). Is it possible to prevent this?

No Filters

With Filters

--------------- EDIT -----------------

As sugested by Daniel, here's the result:

nowrap

As you can see, it's not good yet... Why does the yadcf filters increase the size of the TH ?

回答1:

It's not yacdf which resizes the column, sizing is a complex thing. yacdf just places a text input element, which inherits certain width (not necessarily by yacdf), and then dataTables react to the presence of that input element. That would be a natural behavior of a dumb HTML table too BTW, although dataTables has a whole lot of calculation in the background depending on if you enabled X scroll, or if you enabled auto width calculation. What yadcf cannot do for you is to look at the final width of your header and smartly adjust the width of the input text element. The final width of the column is not a simple thing to obtain, and primarily will be calculated by dataTables (unless you turn autoWidth off - see later - but even in autoWidth off case there's some little wiggle going on).

There are more circumstances which come into picture when your table resizes. In your case the most important is

the width of the text input element what the filter brings in. You can override the width of search boxes individually for each column by customizing the CSS related to the proper class. In your case to change the size of the first four columns' filters:

Assuming that your table has the id 'reportTable', HTML markup:

<table id="reportTable" class="table table-condensed table-striped table-bordered">
    <thead></thead>
    <tbody></tbody>
</table>

The CSS can be something like:

#yadcf-filter--reportTable-0 {
    width: 40px !important;
    max-width: 40px !important;
}

#yadcf-filter--reportTable-1 {
    width: 40px !important;
    max-width: 40px !important;
}

#yadcf-filter--reportTable-2 {
    width: 60px !important;
    max-width: 60px !important;
}

#yadcf-filter--reportTable-3 {
    width: 60px !important;
    max-width: 60px !important;
}

Note, that the width of the text input element what you override can be affected by other frameworks you use. I use Twitter bootstrap for example. Also note that yadcf wraps around a lot of element it places and controls with divs with specific classes and ids. The purpose of those wrappings are exactly to give you opportunity to fine tune the appearance and behavior by CSS.

Other suggestions:

since I saw that you have many columns and they are not too wide. I see that you already disable the clear button for some columns. That's good if that button wouldn't fit anyway. This can be done by supplying filter_reset_button_text: false for the corresponding columns' configuration during yacdf init. I think you got that.
If you really out of space in the header, as Daniel mentions you can move the filter control out of the header.
Read about dataTables configuration options too, for example the autoWidth, look at related options, API and events too: http://datatables.net/reference/option/autoWidth

In more applications I have I ended up having full explicit control of the column width by CSS, otherwise they were just jerked around by dataTables width calculations and native HTML table behavior. That is not advisable though if you want responsive design. Looks like you have complex headers, so you know dataTables to some extent.

Finally, what we can see in your final screenshot is that the presence of the input text elements forces those columns to widen, which forces the other columns to shrink. That shrink goes so far that dataTable's sorting bacground icons overlap with the column headers. If you have too many headers and not enough horizontal space, you may not have other choice but to turn on the horizontal scroll for dataTables (Daniel also mentions Scroll X). This would give slack for dataTables and it'd stretch out the table: http://datatables.net/reference/option/scrollX

回答2:

You have to understand that the moment you add a wide(r) element some of your table headers (that used to be thinner) your table width will become bigger (and its fine)

I can suggest the following solutions:

1) Reduce the width of yadcf filters (apply width attribute to the .yadcf-filter class)

2) Using scrollX

3) Place the filters outside the table by using the filter_container_id property

p.s in order to overcome the breaking of your headers text you can use the following css

table th {
    white-space: nowrap;
    min-width: 150px;
}

来源：https://stackoverflow.com/questions/27862386/how-to-stop-yadcf-filters-in-datatables-to-mess-with-the-headers-cell-width

标签

jquery-datatables

yadcf