Uso datatable pero no me activa el tema bootstrap 3. Yo uso bootstrap en la aplicación por lo que al descargar la librería, no marqué Bootstrap, pero la cuestión es que no me sale el datatable con el tema de bootstrap. Este es el orden de mi del bloque estilos:
{% block stylesheets %}
<link href="{{ asset('bundles/app/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('bundles/app/css/jstree/themes/default/style.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/app/css/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/app/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
<!--[if IE 7]>
<link href="{{ asset('bundles/app/css/font-awesome/css/font-awesome-ie7.min.css')}}" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="{{ asset('bundles/app/css/DataTables/DataTables-1.10.22/css/dataTables.bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('bundles/app/css/bootstrap-datepicker/css/datepicker.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('bundles/app/css/dashboard.css')}}" rel="stylesheet" type="text/css" />
{% endblock %}
y este es el orden del bloque de scripts:
{% block javascripts %}
<script src="{{ asset('bundles/app/js/jquery-3.5.1.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/app/js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}" type="text/javascript"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}" type="text/javascript"></script>
<!--<script src="{{ asset('js/fos_js_routes.js') }}" type="text/javascript"></script>-->
<script src="{{ asset('bundles/app/js/jstree/jstree.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/app/js/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/app/js/bootstrap-datepicker/js/locales/bootstrap-datepicker.es.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/app/js/select2/select2.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/app/js/DataTables/datatables.min.js') }}" type="text/javascript" ></script>
<script src="{{ asset('bundles/app/js/DataTables/DataTables-1.10.22/js/dataTables.bootstrap.min.js') }}" type="text/javascript" ></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="{{ asset('bundles/app/js/html5shiv.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/app/js/respond.min.js') }}" type="text/javascript"></script>
<![endif]-->
<script src="{{ asset('bundles/app/js/functions.min.js') }}" type="text/javascript"></script>
{% endblock %}
lo demás es convertir una tabla en datatable que cargue los datos de manera remota, eso funciona bien, pero la tabla como tal se ve como una normal
este es el fagmento del html con statable:
$.extend(true, $.fn.dataTable.defaults, {
"searching": true,
"ordering": false
});
$(document).ready(function() {
var tablaDatos = $("#tablaDatos").DataTable({
scrollY: '60vh',
scrollCollapse: true,
paging: false,
stateSave: false,
responsive: true,
processing: true,
select: {
style: 'os'
},
'ajax': {
'url': Routing.generate('bulto_recargarTablaArticulos', {
'bultoId': $('#tablaDatos').data('bultoid')
}),
'dataSrc': 'data',
'cache': false
},
"columnDefs": [{
"className": "text-center",
"targets": [0, 1, 3, 4, 5, 6]
},
{
"className": "text-rigth",
"targets": [7]
},
{
orderable: false,
className: 'select-checkbox',
targets: 0
},
],
select: {
style: 'os',
selector: 'td:first-child'
},
'language': {
"search": "Buscar: ",
"zeroRecords": "0 registros encontrados",
"infoEmpty": "No se encontraron resultados coincidentes",
"info": "Total de artículos _TOTAL_",
"infoFiltered": "(filtrado de _MAX_ artículos)",
"processing": "Procesando...",
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<table id="tablaDatos" class="table table-condensed table-responsive table-hover" style="width:100%" data-bultoid="{{ bulto.internalId|uuid_encode }}">
<thead>
<tr class="bg-primary">
<th class="text-center"><input class="checkbox" id="chkTodos" type="checkbox" title="Marcar todos"></th>
<th class="text-center">No</th>
<th class="text-justify text-nowrap">Artículo</th>
<th class="text-center">Es menaje</th>
<th class="text-center">Piezas</th>
<th class="text-center">USD Totales</th>
<th class="text-center">Valor por Piezas (USD)</th>
<th class="text-center">Valor Total (Bs.S)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
{% block stylesheets %}
es laravel?