comme vous pouvez le voir, les icônes de tri sur mon serveur de données se trouvent à l'extrême droite de la colonne:
Est-il possible d'aligner ces éléments à gauche pour qu'ils apparaissent juste après le texte?
c'est à dire.
# ^ Technician ^ Completed Date ^
Je vous remercie
Code à la demande:
<div class="dataTable_wrapper">
<table class="table table-striped table-hover" id="table-d">
<thead>
<tr>
<th>{% trans %} id {% endtrans %}</th>
<th>{% trans %} technician {% endtrans %}</th>
<th>{% trans %} date {% endtrans %}</th>
<th>{% trans %} summary {% endtrans %}</th>
</tr>
</thead>
</table>
</div>
Et:
$('#table-d').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "{{ path('table_data') }}",
"pageLength": 10
})'
Non, il est impossible d'apparaître juste après le texte, car les flèches sont en fait des images d'arrière-plan de classes CSS attachées de manière dynamique aux <th>
. Mais vous pouvez changer la position de l'extrême droite à gauche:
table.dataTable thead .sorting_asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center left;
}
table.dataTable thead .sorting_desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center left;
}
table.dataTable thead .sorting {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center left;
}
démo -> http://jsfiddle.net/ttcz5odt/
Mise à jour - Comment placer des icônes de flèche directement après le texte.
Il a donné quelques réflexions supplémentaires - avec un peu de "bidouille", c'est effectivement possible. L'astuce consiste à désactiver les arrière-plans <th>
et à continuellement injecter/supprimer les <span>
avec les arrière-plans dataTables d'origine.
CSS (en plus de désactiver l'original):
span.arrow-hack {
margin-left: 5px;
}
span.asc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_asc.png") no-repeat center right;
}
span.desc {
background: url("http://cdn.datatables.net/1.10.0/images/sort_desc.png") no-repeat center right;
}
span.sort {
background: url("http://cdn.datatables.net/1.10.0/images/sort_both.png") no-repeat center right;
}
script:
var spanSorting = '<span class="arrow-hack sort"> </span>',
spanAsc = '<span class="arrow-hack asc"> </span>',
spanDesc = '<span class="arrow-hack desc"> </span>';
$("#example").on('click', 'th', function() {
$("#example thead th").each(function(i, th) {
$(th).find('.arrow-hack').remove();
var html = $(th).html(),
cls = $(th).attr('class');
switch (cls) {
case 'sorting_asc' :
$(th).html(html+spanAsc); break;
case 'sorting_desc' :
$(th).html(html+spanDesc); break;
default :
$(th).html(html+spanSorting); break;
}
});
});
mettre à jour les icônes fléchées:
$("#example th").first().click().click();
Maintenant, cela ressemble à ce que nous voulions! :
démo -> http://jsfiddle.net/dmn4q141/
J'ai réussi à faire cela en appliquant les styles suivants (mieux si appliqué comme dernière définition de fichier include css)
/**
* Datatables Sorting icons on left
*/
table.dataTable thead > tr > th {
padding-left: 30px !important;
padding-right: initial !important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
left: 8px !important;
right: auto !important;
}
Il existe une solution très agréable publiée sur le forum DataTables .
Vous pouvez changer le css comme:
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled{
background-position: left center;
}
ce qui suit est css pour rendre la flèche et le titre plus attrayant. (non requis)
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled{
background-position: 5px center;
}
table.dataTable thead th, table.dataTable thead td {
padding: 10px 18px 10px 28px;
}
Voici le genre et la réponse simple.
pour mon écran, 160px à gauche est suffisant.
Ajustez-le selon vos besoins.
#table-d thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after
{
left: 160px;
right: 0;
}