TBODY x HEADER x RESPONSIVE

lauromneto

Good Morning.
Every time I have to work with datatable it is this suffering.
I have a simple datatable. On the desktop, it adjusts itself if I drag the window.
In responsive mode, tbody is not aligned with the header and when dragging the sroll-x, tboby does not follow the header and the header does not follow the tbody.
Does anyone have a solution so that every time we have to work with datatable we don't waste time on these details !?

<table id="table_nivel" class="table table-striped table-bordered table-hover" width="100%">
    <thead>
        <tr>
            <th>Id Nível</th>
            <th>Descrição</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody>
        <?php while($rows_niveis = mysqli_fetch_assoc($resultado_niveis)){ ?>
            <tr>
                <td><?php echo $rows_niveis['nivel_id']; ?></td>
                <td><?php echo $rows_niveis['nivel_dsc']; ?></td>
                <td></td>
            </tr>
            <div class="modal fade" id="myModal<?php echo $rows_niveis['nivel_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog animated slideInDown" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" align="center" id="myModalLabel">Cadastro de Nível</h4>
                        </div>
                        <div class="modal-body">
                            <p><?php echo $rows_niveis['nivel_id']; ?></p>
                            <p><?php echo $rows_niveis['nivel_dsc']; ?></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>                                                              
                    </div>
                </div>
            </div>
        <?php } ?>
    </tbody>                                            
</table>


<script>
    var table_nivel;
    table_nivel = $('#table_nivel').DataTable({
        dom: '<"dataTables_wrapper dt-bootstrap"<"row"<"col-xl-7 d-block d-xl-block justify-content-center"<"d-block d-lg-inline-flex  "l><"d-block d-lg-inline-flex"B>><"col-xl-5 d-flex d-xl-block justify-content-center"fr>>t<"row"<"col-sm-5"i><"col-sm-7"p>>>',
        buttons: [
            {
                text: '<i class="fa fa-plus"></i>Adicionar',
                className:"btn btn-success waves-effect waves-light",
                init: function(api, node, config) {
                    $(node).removeClass('btn-outline-primary')
                },              
                action: function ( e, dt, node, config ) {
                    alert( 'Button activated' );
                }
            },
            {
                extend: 'pdf',
                text: '<i class="fa fa-file-pdf-o"></i>PDF',
                title: '',
                className:"btn btn-primary waves-effect waves-light",
                init: function(api, node, config) {
                    $(node).removeClass('btn-outline-primary')
                },
                exportOptions: {
                    columns: [0,1],
                },
                messageTop: ''                  
            },
            {
                extend: 'print',
                text: '<i class="fa fa-print"></i>Imprimir',
                title: '',
                className:"btn btn-light waves-effect waves-light",
                init: function(api, node, config) {
                    $(node).removeClass('btn-outline-primary')
                },
                exportOptions: {
                    columns: [0,1],
                },
                messageTop: ''  ,
                customize: function ( doc ) {
                    $(doc.document.body).find('h1').css('font-size', '15pt');
                }                   
            }
        ],
        bFilter : true,               
        bLengthChange: false,
        paging:   false,
        info:     false,            
        columnDefs: [
            {
                "targets": -1,
                "data": null,
                "render": function (data, type, row, meta) {
                    return '<button id="vis' + data[0] + '" type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#myModal' + data[0] + '" title="Visualizar"><i class="fa fa-search"></i></button> <button id="edt' + data[0] + '" type="button" class="btn btn-warning waves-effect waves-light" data-toggle="modal" data-target="#myModal'+ data[0] +'" title="Editar"><i class="fa fa-edit"></i></button> <button id="exc' + data[0] + '" type="button" class="btn btn-danger waves-effect waves-light" data-toggle="modal" data-target="#myModal'+ data[0] +'" title="Excluir"><i class="fa fa-trash-o"></i></button>'
                }
            }
        ],
        language: {
            "url": '../../assets/js/dtptbr.js'
        },
    });
</script>

kthorngren

Looks like you are using Bootstrap. Many times the problems you described are due to not using the correct Datatable JS and CSS files for the styling framework. The place to start is to make sure you have the proper files by using the Download Builder.

Styling issues are hard to diagnose by looking at code snippets. To help debug we will need a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

lauromneto

Follow the link. The code is cleared for better viewing.
Note that, in responsiveness, tbody does not align with the header.
And with regard to css and js, I'm using it.

http://lmneto.com.br/teste/

I am grateful if you can help me, so at other times I would not need to bother you with this.

kthorngren

The link gives a 404 not found error.

Kevin

lauromneto

Missing the "e" .... it was test, but it is teste.
Now the link is correct

http://lmneto.com.br/teste/

kthorngren

I'm using Chrome on a Mac and not able to replicate the problem when adjusting the browser width as small as it will go.

Your example seems to be a bit different than the code you posted. In the code snippets I don't see scrollX. It looks like you are wanting to use Bootstrap responsive with table-responsive. At least you test case has that but the above code snippet doesn't show it.

I would say that the Bootstrap responsive solution and scrollX are competing solutions. My suggestion is to use either scrollX or Bootstrap responsive but not both. Or you can use Datatables Responsive Extension.

If you still need help then please provide the steps needed to replicate the issue.

Kevin

lauromneto

Please see the video that you will see the problem. I believe you shouldn't have done this:

http://lmneto.com.br/teste/erro.mp4

kthorngren

My browser doesn't go small enough to show the scroll bar.

I see you still have both table-responsive and scrollX. Did you try as I suggest with only one of them?

Kevin

lauromneto

Are you referring to

<

div class = "table-responsive>!?
If so, I just removed it and the same thing happens.
Only has scrollX

lauromneto

And if I remove the scrollX, the buttons and the search scroll together and I don't want that. I just want the table to scroll, the buttons and the search to be fixed

kthorngren

Sorry, I don't have a small enough page size to invoke the scroll bar. Someone with a small device may be able to take a look.

Kevin

lauromneto

But Kevin, if you're using Chrome, go on to inspect >> toogle device toolbar

allan

You have this CSS in your app-style.css file:

.dataTables_scrollHeadInner table {
    width: 100% !important;
}

Remove it, and it will work correctly.

Allan

lauromneto

Good morning Allan.
Really! Thank you saw. It was in my face and I didn't see it. So many things at the same time, we end up not even seeing little things. Thank you saw.
Allan, taking advantage, a question.
What is the best way to make an edit, but without using the Editor!?
I already have the datatable. I load it without ajax (per php instruction). I have the modal to edit, in short, it edits and saves in the bd right.
The question is, after I close the modal.
How to update the line without refreshing the browser

kthorngren

Use row().data() with a row-selector the selects the appropriate row. Maybe you already have this if you are clicking the row to open the modal and populating the data. Then in the data parameter place the updated row data in the same structure (object or array) as the original row data.

Then use draw() to update the table display, sorting, etc. Take a look at the docs for options to stay on the same page if you wish.

Kevin

lauromneto

Allan, see how I ended up doing it and it's working perfectly:

var table_nivel;
table_nivel = $('#table_nivel').DataTable({
    columnDefs: [
        {
            "targets": -1,
            "data": null,
            "render": function (data, type, row, meta) {
                return '<button type="button" class="btn btn-info waves-effect waves-light" data-toggle="modal" data-target="#modalSCR" title="Visualizar"><i class="fa fa-search"></i></button> <button type="button" class="btn btn-warning waves-effect waves-light" data-toggle="modal" data-target="#modalEDT" title="Editar"><i class="fa fa-edit"></i></button> <button type="button" class="btn btn-danger waves-effect waves-light" data-toggle="modal" data-target="#modalEXC" title="Excluir"><i class="fa fa-trash-o"></i></button>'
            }
        }
    ],          
    bFilter : true,               
    bLengthChange: false,
    paging:   false,
    info:     false,            
    ajax: 'response.php'
});

table_nivel.on('click', 'tr', function () {
    if ( table_nivel.data().count() ) { 
        idTABLE = table_nivel.row(this).data()[0];
        dscTABLE = table_nivel.row(this).data()[1];
    }
});     

$('#modalSCR').on('show.bs.modal', function (event) {
  var modal = $(this);
  modal.find('#idSCR').val(idTABLE);
  modal.find('#dscSCR').val(dscTABLE);
})

$('#modalEDT').on('show.bs.modal', function (event) {
  var modal = $(this);
  modal.find('#idEDT').val(idTABLE);
  modal.find('#dscEDT').val(dscTABLE);
})

$('#modalEDT').on('hide.bs.modal', function (event) {
    table_nivel.ajax.reload();
})  

$(function ($){
    $('#submitEDT').click(function(){
        $.ajax({
            type : 'POST',
            url : 'edita.php',
            data: $('#formEDT').serialize(),
            dataType : 'html',
            async: true,
            beforeSend:function(data){
                $('.statusMsg').html('<img scr="loading.gif" style="width:24px;height:24px" />');
            },
            success : function(data){
                $('.statusMsg').html('<span style="color:green;"><p>Gravado com sucesso!</p></span>');
            },
            error : function(data) {
                $('.statusMsg').html('<span style="color:green;">Erro na gravação!</span>');
            }
        });
    })           
});

My question is: Is it better to do it this way, with loading via Ajax or the other way I asked above (only with php)?

allan

If that works, then go with that .

Allan