Fill Datatables to Column

Question

Fill Datatables to Column

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hi, I have a problem for a Datatable to fill the width of a col (using Bootstrap 4)

HTML is like this

<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>

References are like this

<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>

The way to feed the DataTable is as follows.

<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>

Being more specific, this is my problem, the width of the DataTable does not cover the width of the div (col bootstrap 4)

Has someone had something similar happen to him?

css datatables bootstrap-4

asked by Archer_A 08.04.2018 в 16:50

source

2 answers

Why does Assertion Error give me? place variables in the Coordinates in OpenLayers Map marker

score 0 · Answer 1

It's probably your bootstrap import, I tried it on a project I'm doing and it looks like this

This is the import that I do and I put it in the index.html angular use 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>

You can find this in the Bootstrap

documentation

score 0 · Answer 2

I do not understand the problems you want to say but if you want to fill the table with a query I do it in the following way

 <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>

in the controller I do it in the following way

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

}