Superfluous data in table headers

Bonskeeper

Hi. I create table with DataTables plugin. When I view a site from a mobile phone, there are superfluous data in the headers of the table (in those that are hidden). Screenshot attached. In the green rectangle in the screenshot, the correct part of the header in red is incorrect.

My js code:
function dt_init() {
$('#trms_table').DataTable({
rowReorder: {
selector: 'td:nth-child(2)'
},
responsive: true,
"info": false,
autoWidth: false,
lengthChange: false,
pageLength: 25,
"language": {
"url": "{{ url_for('static', filename='js/Russian.json') }}"
})
.columns.adjust()
.responsive.recalc();

};
dt_init();

My HTML code:
<thead>
<tr class="{class=}">
<th>{{('Control')}}</th>
<th>{{('UID')}}</th><!-- {super_admin?= -->
<th>{{('Agent')}}</th><!-- } -->
<th>{{('Name')}}</th>
<th>{{("Address")}}</th>
<th>{{('Set of services)}}</th>
<th>{{('Tariff')}}</th>
<th>{{('Software versions')}}</th>
<th>{{_('Paid before')}}</th>
</tr>
</thead>
<tbody>
{{ row.trm_list(context.trms, current_user) }}
</tbody>
</table>

I use flask and jinja2.
How I can fix this ?
Can someone help me?

allan

What you will need to do is introduce a second row into the header which you can insert the filtering elements into. Then use orderCellsTop to tell DataTables to use the top cells for the title and ordering.

Allan

Bonskeeper

Thanks for your reply allan. I tried to understand him and could not. Can you explain it differently? Give a simple example?

Bonskeeper

function dt_init() {
     $('#trms_table').DataTable({
     rowReorder: {
         selector: 'td:nth-child(2)'
     },
    fixedHeader: true,
    responsive: true,
   "orderCellsTop": true,
   "info": false,
   autoWidth: false,
   lengthChange: false,
   pageLength: 25,
   "language": {
       "url": "{{ url_for('static', filename='js/Russian.json') }}"
   },

initComplete: function () {
            this.api().columns().every( function () {
                var column = this;

                if (this.header().innerHTML=='' || this.header().id=='ctrl') return;
                var select = $('<br><select style="width:100%;height:24px;padding:2px 1px"><option value=""></option></select>')
                                    .appendTo( $(column.header()) )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } ).on( 'click', function(event){
                  event.stopPropagation();
                    });

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
},

"footerCallback": function ( row, data, start, end, display ) {
            // Update footer
            var tfoot = $("#trms_table > tfoot");
            if (tfoot.length) {
            $("#trms_table > tfoot").html('<tr><td colspan="10" style="font-weight:bold">{{_("Всего")}}: '+this.fnGetData().length+'</td></tr>');
            } else {
                $('<tfoot><tr><td colspan="10" style="font-weight:bold">{{_("Всего")}}: '+this.fnGetData().length+'</td></tr></tfoot>').insertAfter("#trms_table > tbody");
            };
        }

})
.columns.adjust()
.responsive.recalc();

};

Its all code if it helps. What i need to change to fix my problem?

allan

What a look at the comments on this example page which discuss various ways of putting the filters in the header with a second row.

Allan