Datatables is not responsive

Question

Datatables is not responsive

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have the following table, and the problem is that when it is for small devices it is not responsive.

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" th:href="@{/css/jquery.dataTables.css}" />
    <script th:src="@{/js/jquery.dataTables.js}"></script>
</head>
<table id="ranking" class="table table-hover">
    <thead class="table-info">
        <tr >
            <th>Posición</th>
            <th>Alias</th>
            <th>Nombre</th>
            <th>Puntuación</th>
        </tr>
    </thead>
    <tbody>
        <!-- <tr th:each="u,pos: ${usuarios}">
            <th th:text="${pos.count}"></th>
            <th th:text="${u.alias}"></th>
            <th th:text="${u.nombre}"></th>
            <th th:text="${u.puntos}"></th>
        </tr>-->
        <tr>
        <th>aaaaaaaaaa</th>
        <th>aaaaaaaaaa</th>
        <th>aaaaaaaaa</th>
        <th>aaaaaaaaaaaaaaaaaaa</th>

        </tr>
    </tbody>
</table>

<script>
$('#ranking').DataTable( {
    searching : false,
    responsive: true,
    lengthChange : false,
    paging : false,
    info :false,
    language : {
        "url": "/js/spanish.json"
    }
} );

</script>

bootstrap datatables

asked by Stewie 04.12.2018 в 21:12

source

3 answers

Insert SELECT in a table RegExp for URL

score 1 · Answer 1

Try adding the classes "responsive display no-wrap" to the table and force it to have a 100% acncho:

<table id="ranking" class="table table-hover display responsive no-wrap" width="100%">

UPDATE

See this case if it can help you.

score 1 · Answer 2

Add these 2 files:

css: //cdn.datatables.net/responsive/2.2.3/css/dataTables.responsive.css

js: //cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js

and it's okay to put it in responsive: true

You can read this article: responsive

score 0 · Answer 3

Make sure you occupy the library: dataTables.bootstrap.min.js

To make a table responsive, you can put it on a div by calling the class: table-responsive

 <div class="table-responsive">
   <table id="ranking" class="table table-hover">
     Tu HTML del contenido de la tabla aquí....
   </table>
 </div>

That way the table would be adjusted in small devices. Note: It will not make the table small; but rather, it will place a horizontal scroll.