Hi.
I'm starting to use DataTables, and I'm finding it wonderful. I know this has probably been asked here previously, but I believe my case may be different. I am using DataTables with the following configuration (JavaScript):
var tabeladt = $('#tab-teste-dt').DataTable(
{
// "paging" : true,
"pagingType": "simple_numbers",
// "lengthChange": false,
// "ordering" : true,
// "searching" : false,
// "info" : true,
"serverSide" : true,
"processing": true,
"ajax" :
{
"url" : "lista-ajax",
"type" : "POST",
"dataType" : "json",
"contentType" : "application/json; charset=utf-8",
"async" : true,
"cache" : false,
"processData" : false,
"data": function ( d )
{
return JSON.stringify( d );
}
},
"columns" : [
{} ,
{} ,
{} ,
// Coluna 4...
{ "render" : function(data , type , row , meta)
{
if(data.substr(0, 1) == "H")
{
return '<img src="/app/imagens/ico-h.png" />';
}
else if(data.substr(0,1) == "M")
{
return '<img src="/app/imagens/ico-m.png" />';
}
else
{
return data;
}
} } ,
{} ],
"dom" : 'rt<"nav-dt"pl>',
"language" : {
"decimal": ",",
"emptyTable": "Sem dados disponíveis no momento.",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filtered from _MAX_ total entries)",
"infoPostFix": "",
"thousands": ".",
"lengthMenu": "ITENS POR PÁGINA: _MENU_",
"loadingRecords": "Carregando...",
"processing": "Processando...",
"search": "PESQUSIAR:",
"zeroRecords": "Nenhum registro foi encontrado.",
"paginate": {
"first": "INÍCIO",
"last": "FIM",
"next": "SEGUINTE",
"previous": "ANTERIOR"
},
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
}
},
// Extensão select!
"select" :
{
'style': 'single'
}
});
Here is my HTML markup:
<div class="conte-tabela" th:fragment="tabela-teste (titulo)">
<!-- HEADER -->
<div id="cabecalho">
<!-- TITLE -->
<span id="titulo" th:text="${titulo}">Título de tabela</span>
<!-- OPTIONS BUTTONS -->
<span id="opcoes">
<button id="bot-pesquisa"></button><button id="bot-colunas"></button>
</span>
<!-- COLUMNS MENU -->
<ul id="menu-colunas" class="popup-menu">
<li th:each="col : ${#numbers.sequence(0 , colunas.length - 1)}">
<label>
<input type="checkbox" th:value="${col}" th:text="${colunas[col]}" checked="checked">
</label>
</li>
</ul>
<!-- SEARCH MENU -->
<div id="menu-pesquisa" class="popup-menu">
<input type="text" placeholder="pesquisar por..."/>
</div>
</div>
<!-- TABLE -->
<table id="tab-teste-dt" class="stripe cell-border">
<thead>
<tr>
<th th:each="coluna : ${colunas}"
th:text="${coluna}">
nome de coluna.
</th>
</tr>
</thead>
</table>
</div>
Note: There are some special elements from Thymeleaf (I'm a Java developer).
My CSS file:
.conte-tabela
{
width: 80%;
margin-left: auto;
margin-right: auto;
}
.conte-tabela #cabecalho
{
background: #474241;
border-left: 1px solid #312e2d;
border-right: 1px solid #312e2d;
border-top: 1px solid #312e2d;
width: 100%;
display: table;
padding: 14px 38px;
box-sizing: border-box;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.conte-tabela #cabecalho #titulo
{
text-transform: uppercase;
font-size: 10pt;
font-weight: bold;
color: white;
display: table-cell;
vertical-align: middle;
}
.conte-tabela #cabecalho #opcoes
{
float: right;
display: inline-block;
}
.conte-tabela #cabecalho #opcoes button
{
background-color: #474241;
border: 1px solid #312e2d;
box-sizing: border-box;
color: white; width : 40px;
height: 40px;
margin-left: 10px;
width: 40px;
background-repeat: no-repeat;
background-position: center center;
}
.conte-tabela #cabecalho #opcoes #bot-pesquisa
{
background-image: url("/app/imagens/ico-pesquisa.png");
}
.conte-tabela #cabecalho #opcoes #bot-colunas
{
background-image: url("/app/imagens/ico-conf.png");
}
.conte-tabela #cabecalho #opcoes button:ACTIVE
{
background-color: #312e2d;
}
.conte-tabela #cabecalho #menu-colunas
{
margin: 0;
padding: 20px;
position: absolute;
top: 100%;
right: 38px;
border: 1px solid #312e2d;
background: #474241;
z-index: 100;
list-style: none;
opacity: 0.9;
display: none;
}
.conte-tabela #cabecalho #menu-colunas li
{
color: white;
padding-top: 10px;
padding-bottom: 10px;
}
.conte-tabela #cabecalho #menu-colunas input[type="checkbox"]
{
margin-right: 10px;
}
.conte-tabela #cabecalho #menu-pesquisa
{
margin: 0;
padding: 20px;
position: absolute;
top: 100%;
right: 38px;
border: 1px solid #312e2d;
background: #474241;
display: none;
z-index: 100;
opacity: 0.9;
}
Now, take a look at the attached image, please. See how the table exceeds the imposed width limits. If I uncheck the CSS stylization of "element", it get the right size. How can I fix this?
I am also using a separate CSS file to stylize the table in my way. In the case, I generated a theme for styling, and I'm using it as a style for my table. I copied the code and pasted it into a new file (CSS). This gave me full control over stylization, and created a locale for it. I'm saying this, because I do not know if what I did was correct. Since the DataTables styling file is kinda fat/big, I omitted it here. If it is necessary, I will put it here.
Thanks in advance.
