0

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 introducir la descripción de la imagen aquí

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&iacute;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>

5
  • Puedes poner el codigo del datatable? Commented el 27 oct. 2020 a las 21:25
  • eso de {% block stylesheets %} es laravel? Commented el 27 oct. 2020 a las 22:10
  • @RuslanLópez no, es Twig en Symfony
    – Francisco
    Commented el 27 oct. 2020 a las 22:15
  • bien, ya actualizé las etiquetas esperando que alguien que lo haya usado pueda ayudarte Commented el 27 oct. 2020 a las 23:26
  • ahh ok gracias!!!
    – Francisco
    Commented el 28 oct. 2020 a las 13:43

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.