filter display issue on small screens

[samerda75]

Hi again,

First i would like to thank you for this very useful and fast library.

one more issue i would like to report:

When i set the responsive option to true under the table options, on small devices some fields will be shown under the plus sign which is normal but the filter for those fields remain appearing on the table header which i think is better to hide

Thanks again

[morlandi]

Hello @samerda75 ... can you upload a screenshot showing the problem ? Many thanks, Mario

[samerda75]

@morlandi

[samerda75]

@morlandi looking for your kind feedback on above issue

[morlandi]

You can try to control the size of a column with these two attributes:

column_defs = [{
    ...
    'width': 300,                       # optional: controls the minimum with of each single column
    'max_length': 0,                    # if > 0, clip result longer then max_length
    ...
}, {

and make sure to supply autoWith=false for table initialization:

AjaxDatatableViewUtils.initialize_table(
    element,
    url,
    {
        // extra_options (example)
        autoWidth: false,
        ...

However, this sounds like a nasty issue ;)

The Javascript library DataTables.net is a great project but sometimes a little stubborn; for some reason, they decided to use two separate HTML tables for rendering the heading and the content of the "resulting" table, and occasionally this causes misalignment problems. If you have suggestions on how to further optimize the javascript initializations part, I would be more than happy to include suggested adjustment in the app.

Another possible and totally different approach, maybe more suitable for mobiles, would be to remove the column filters altogether from the table, and display a "filters form" instead, much like in a listview in Django admin.

On form submission, or possibly as soon as any form field has changed, and redraw the table supplying the new filters collected from the form, as explained here:

https://github.com/morlandi/django-ajax-datatable/issues/3

[samerda75]

@morlandi thank you for reply, i have tried the first suggested solution but didn’t work, i found this solution https://jsfiddle.net/h1qzdecy/1/ but don’t know how to put the datatable into table variable since i am using below code to render the table as you suggested AjaxDatatableViewUtils.initialize_table( $('#table_id'), "{% url 'crm:ajax_datatable_customer' %}", { // extra_options (example) processing: false, autoWidth: false, .....

[morlandi]

The basic idea is: whatever you specify in the "extra_options" dictionary, is passed "as is" to datatables.js for table creation. Does this help ?

[samerda75]

@morlandi the issue happen because in the function you are rendering the table body not inside the original table as you can see in attached elements, please advise

[morlandi]

As prescribed by the library, my code simply does this:

 element.dataTable(options)

where "element" is a simple <table>.

Datatables.net replaces this table with a complex HTML structure; I have no control over this