How to make the Dom Elements Responsive in Mobile

Saritha

If i am opening this Datatable in mobile Dom elements(l,f,p..etc) are disarranging in my table and these are not look like in desktop.
Please suggest me how to make them responsive when i am opening in mobile device

allan

Can you link to a test page showing the issue please (per the forum rules). The DataTables default stylesheet should be responsive.

Allan

Saritha

Hello Allan,
thanks for your reply.
Please find the attchment.Search,pagination and filters are not aligned properly.

allan

Thanks for the screenshot. As I mentioned, I would need a link to the page showing the issue.

Allan

Saritha

Allan,
You would need the logon to check this and it is not preferable.
Let me know is there any way if i can share the link.

Saritha

This the code for reference.

<script>
                
     j$ = jQuery.noConflict();
            j$(document).ready( function () {
         j$('[id$="aragingtable"]').DataTable({ 
                 'responsive': true,
                 dom: '<"clear">lfBrtip',
                 
       buttons: [
            {
                extend: 'excelHtml5',
                title: 'Open Invoices'
            }
            ],
              "order": [ 4, 'desc' ],
                         "aoColumnDefs": [ {
           
                      "aTargets": [ 5,6 ],
                    "mRender": function (data, type, full) {
                     var formmatedvalue=data.replace(/(\d+)(\d{3})/, '$1' + ',' + '$2')
                      return formmatedvalue;
                       }
              }]
     }); 
     }); 
    </script>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The paging and filtering in your screenshot are all centre aligned. What do you mean by "not aligned properly"? If you want them to be left aligned you need to update the DataTables stylesheet to do that, or have your own override styles.

Allan

Saritha

Hello,
When i open in desktop Pagination:Alligned to bottom right corner.
Search:Top right Corner
Show Filter:Top left Corner
Excel:Next to the Show filter
Attaching here with image for desktop
I want to keep these in same position in mobile view.

allan

But there isn't space for them to be left and right positioned on the same row when in mobile view. You can see that from your own screenshot, they would overlap.

Allan

Saritha

Yeah you are right,thanks for the look over it.
So since there is no space it is aligning to bottom.
Is there any way if i can arrange the Show filter and Search box in different rows so that in mobile view it can be still remaining in top right side of the table.

allan

You mean you just want to right align those two elements? Sure, just use CSS to do it:

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: right;
}

Obviously wrapped in a suitable responsive CSS @ statement.

Allan