DataTables / Responsive

Responsive extension for DataTables, providing support for complex tables on all device screen sizes
Other
148 stars 87 forks source link

Table responsive overflow using Bootstrap 3 and ajax pagination #39

Closed peyobr closed 8 years ago

peyobr commented 9 years ago

Hi,

everything seems perfect...

but switching pages via ajax in a 8" tablet overflow always happens when some cell contains more text than as usual.

Already tried all doc examples... any ideas?

Thank you!!

My HTML follows:

<div class="content-wrapper col-sm-12">
    <div class="table">
        <table class="table table-striped" width="100%" id="ulogs-table">
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Tipo</th>
                    <th>Utente</th>
                    <th>Action</th>
                    <th>Ip</th>
                    <th>Method</th>
                    <th>Url</th>
                    <th>Info</th>
                    <th>Log</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#ulogs-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ url("ws/ulogs") }}',
            order: [ [0, "desc"] ],
            lengthMenu: [ [10, 25, 50, 100], [10, 25, 50, 100] ],
            pagingType: "full_numbers",
            searchHighlight: true,
            responsive: true,
            language: {
                url: "https://cdn.datatables.net/plug-ins/1.10.7/i18n/Italian.json"
            },
            search: {
                caseInsensitive: true
            },
            columnDefs: [{
                render: function(data, type, row){
                    return "<abbr title='" + data + "'><p class='text-capitalize'>" + data.replace(/.*@/, "") + "</p></abbr>";
                },
                targets: 3
            },{
                type: "ip-address",
                targets: 4
            },{
                render: function(data, type, row){
                    return "<abbr title='" + data + "'><span class='fa fa-expand'></span></abbr>";
                },
                targets: 6
            },{
                render: function(data, type, row){
                    return JSON.stringify(data, null, 1);
                },
                targets: 7
            }]
        });
    });
</script>
DataTables commented 9 years ago

Can you link to a test page showing the issue please.

peyobr commented 9 years ago

Hi, please give me some time to make a demo test page showing the issue.

At this moment the feature is in a production environment and i need to seed dummy test data for that purpose.

Thank you in advance.

DataTables commented 9 years ago

No problem - thanks for looking into it!

peyobr commented 9 years ago

I'm start thinking that no issue actually exists...

I'm dealing with very long base64 encoded sha512 hash data log strings, maybe datatables is forced to wrap these "unbreakable" lines... then the resulting overflow...

I'm start thinking that the only solution would be manually force class control...

DataTables commented 8 years ago

Sorry for the massive delay in replying here. I've committed a number of changes that might help - but there is also the ellipsis display renderer that you might find use if you want to truncate long strings.

Going to close for now. If this is still an issue, please reopen with a link to a test case.