Button with pagelength + image

sadias@gmail.com

Hello all,

I have a datatable with buttons displaying images from 'material-icons'.
But, among such buttons, there is a "pagelength", and when the menu to custom is selected the image gets lost.

In other buttons this function is ok. My problem is only on the 'pagelength' button.
I need to keep the exibition of this image any time.

Can you pls help me ?

My code:

    <script type="text/javascript">
            $(document).ready(function() {
                var table = $('#table-uf').DataTable( {
                     dom: 'Bfrtip',
                    lengthChange: false,
                    responsive: true,
                    "pagingType": "full_numbers",
                    "language": {
                        "lengthMenu": "Exibindo _MENU_ registros por página",
                        "zeroRecords": "Nenhum registro encontrado",
                        "info": "Exibindo página _PAGE_ de _PAGES_",
                        "infoEmpty": "Nenhuma UF cadastrada",
                        "infoFiltered": "(em um total de _MAX_ registros)",
                        "paginate":{
                            "first": "Primeira",
                            "previous": "Anterior",
                            "next": "Próxima",
                            "last": "Última"
                            }   
                        },

                    lengthMenu: [
                        [ 1, 3, 7,9, -1 ],
                        [ '1', '3', '7', '9', 'Todas' ]
                        ],
                    buttons: [
                        {extend: 'pageLength', text: '<i class="material-icons">grid_on</i>pageLength' },
                        {extend: 'copy', text: '<i class="material-icons">content_copy</i>Copiar' },
                        {extend: 'print', text: '<i class="material-icons">print</i>Imprimir' },
                        {extend: 'colvis', text: '<i class="material-icons">settings</i>Colunas' }, 
                        {extend: 'collection',text: '<i class="material-icons">file_download</i>Baixar arquivo',buttons: [ 'pdfHtml5', 'excelHtml5', 'csvHtml5' ]},
                        ]
                } );

                table.buttons().container()
                    .appendTo( '#container .col-sm-6:eq(0)' );

            } );
        </script>



    <table id="table-uf" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr>
            <tr> <td>Garrett winters</td> <td>accountant</td> <td>tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr>
            <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr>
            <tr> <td>Hermione Butler</td> <td>Regional Director</td> <td>London</td> <td>47</td> <td>2011/03/21</td> <td>$356,250</td> </tr>
            <tr> <td>Lael Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> </tr>
            <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</td> </tr>
            <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr>
            <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr>
            <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th>
            </tr>
        </tfoot>
    </table>

kthorngren

If I understand your question correctly this FAQ should help.

Kevin

sadias@gmail.com

Thank you very much!
Solved this way:

dom:"<'row'<'col-sm-6'B><'col-sm-3'l><'col-sm-3'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>"