0

Hola tengo un problema para que un Datatable rellene el ancho de una col (Usando Bootstrap 4)

introducir la descripción de la imagen aquí

El HTML es así

<div class="container-fluid">
  <div class="form-group">
    <div class="row" style="padding-top:20px">
        <div class="col">
            <div class="card bg-light mb-3">
                <div class="card-header">
                    <i class="fa fa-users" aria-hidden="true"></i> Lista de Usuarios 
                    <button id="AgregarUsuario" class="btn btn-success btn-xs float-right"><i class="fa fa-user-plus"></i> Nuevo Usuario</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="DataUsuarios" class="table table-striped table-bordered text-nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Usuario</th>
                                    <th>Nombre</th>
                                    <th>Correo</th>
                                    <th>Rol</th>
                                    <th>Estatus</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Las Referencias son asi

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>

La manera de alimentar al DataTable es la siguiente.

<script type="text/javascript">
        $(document).ready(function () {
            $('#DataUsuarios').dataTable({
                "sAjaxSource": '@Url.Action("DatosUsuarios", "Usuarios")',

                "responsive": {
                    "details": false,
                },

                "autoWidth": false,
                "responsive": true,
                "paging": true,
                "info": false,
                "processing": true,
                "destroy": "true", 
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json"
                },

                "aoColumns": [
                    { "sName": "Usuario", "mData": "Usuario" },
                    { "sName": "Nombre", "mData": "Nombre" },
                    { "sName": "Correo", "mData": "Correo" },
                    { "sName": "Rol", "mData": "Rol" },
                    { "sName": "Estatus", "mData": "Estatus" },
                    {
                        "mRender": function (data, type, full)
                        {
                            var Id = full['Usuario'];

                            return '<a href="/Cuenta/EditarUsuario?UserName=' + Id + '"><i class="ui-tooltip fa fa-pencil" style="font- size: 16px;" data-original-title="Edit"> Editar</i></a> | <a href="/Cuenta/HabilitarUsuario?UserName=' + Id + '"><i class="ui-tooltip fa fa-check-circle" style="font- size: 16px;" data-original-title="Enable"> Habilitar</i></a> | <a href="/Cuenta/DeshabilitarUsuario?UserName=' + Id + '"><i class="ui-tooltip fa fa-minus-circle" style="font- size: 16px;" data-original-title="Disable"> Deshabilitar</i></a> | <a href="/Cuenta/BorrarUsuario?UserName=' + Id + '"><i class="ui-tooltip fa fa-trash-o" style="font- size: 16px;" data-original-title="Delete"> Borrar</i></a>';
                        }
                    }
                ],
            });
        });
    </script>

Siendo mas especificos, este es mi problema, el ancho del DataTable no abarca el Ancho del div (col bootstrap 4)

introducir la descripción de la imagen aquí

Ha alguien le ha pasado algo similar?

3
  • No vemos la información que intentas agregar a la tabla ni como estás activando DataTables.
    – Shaz
    Commented el 8 abr. 2018 a las 14:55
  • @Shaz he agregado la información, creo el problema es ese, ya que sin llenar el DataTable se visualiza bien.
    – Archer_A
    Commented el 8 abr. 2018 a las 16:20
  • No le entiendo lo que quiere decir cuando dice "Hola tengo un problema para que un Datatable rellene el ancho de una col" significa que me haga una consulta y me llene los datos Commented el 8 abr. 2018 a las 16:40

2 respuestas 2

0

Probablemente sea tu importación del bootstrap, yo lo probé en un proyecto que estoy haciendo y se mira así introducir la descripción de la imagen aquí

Este es el import que hago y lo pongo en el index.html uso angular 5

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Puedes encontrar esto en la documentación del Bootstrap

1
  • Creo el problema es a la hora de alimentar el DataTable, ya que sin llenar el DataTable se visualiza bien.
    – Archer_A
    Commented el 8 abr. 2018 a las 16:21
0

no le entiendo el poblemas que quiere decir pero si quiere llenar la tabla con una consulta lo hago de la siguiente forma

 <table class="table table-bordered table-responsive table  table-striped dataTable" id="dataTable1" aria-describedby="dataTable1_info" style="margin-top: 20px;">
    <thead>
      <tr>
        <th>ID  </th>
        <th>nombre</th>
        <th>Aciones</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>ID  </th>
        <th>nombre</th>
        <th>Aciones</th>
      </tr>
        </tfoot>
    <tbody aria-relevant="all" aria-live="polite" id="showdata">
    </tbody>
  </table>




<script>
//llamo la funcion 
showAllGrupos_poblacionale();


function showAllGrupos_poblacionale(){
          $.ajax({
            type: 'ajax',
            url: '<?php echo base_url() ?>Grupos_poblacionales/showAllGrupos_poblacionale',
            async: false,
            dataType: 'json',
            success: function(data){
              var html = '';
              var i;
            var t = $('#dataTable1').DataTable();
            t.clear();
            for(i=0; i<data.length; i++){   
            var counter = 1;
            t.row.add( [
                data[i].id,
                data[i].nombre,       

                '<a href="javascript:;" class="btn btn-info item-edit" data="'+data[i].id+'">Edit</a>&nbsp;&nbsp; '+
                '<a href="javascript:;" class="btn btn-danger item-delete" data="'+data[i].id+'">Delete</a>'
            ] ).draw( true );
              }
            },
            error: function(){
              alert('No se pudo carga los datos ');
            }
          });
        }//fin de shollallpersona
</script>

en el controlador lo hago de la siguiente forma

 //realizar la consulta 
    public function showAllOrientaciones_sexuales(){
    $this->load->model('Orientaciones_sexuale');
    $data = Orientaciones_sexuale::all();
    echo json_encode($data);

}
2

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.