rstaib/jquery-bootgrid

How to use styling in bootgrid?

danteCortes opened this issue · 1 comments

danteCortes commented

var grid = $("#tblVentas").bootgrid({ labels: { all: "todos", infos: "", loading: "Cargando datos...", noResults: "Ningun resultado encontrado", refresh: "Actualizar", search: "Buscar" }, styling: { columnHeaderText: 'text-center' }, ajax: true, post: function (){ return { '_token': $("meta[name='csrf-token']").attr('content'), id: "b0df282a-0d67-40e5-8558-c9e93b7befed" } }, url: "listar-ventas", formatters: { "commands": function(column, row){ return




} } }).on("loaded.rs.jquery.bootgrid", function(){ /* poner el focus en el input de busqueda */ $("#tblVentas-header > div > div > div.search.form-group > div > input").trigger('focus') });

this does not work, the option styling, as in the documentation.

estebanquito266 commented

In HTML i have a data-column-id ="idproceso" and a data-column-id="link"
Using this property, i can define a "Formater" (see: http://www.jquery-bootgrid.com/Documentation#formatters)
Then in a <script> I define an instance of the formater
In the column named "link" insert a link to edit/view and in the column named "idproceso" insert a simple badge to a datta.
It's important to see how reference the column's data via "row.[name_of_column]". In my example for data of column named "idproceso" i access the data vía row.idproceso

HTML

<table class="table table-striped" id="bootgrid-selection">  
           <thead>
            <tr>
              <th data-column-id="id" data-type="numeric" data-visible="false">ID</th>
              <th data-column-id="idproceso" data-formatter="idproceso">Proceso en curso</th>
              <th data-column-id="link" data-formatter="link" data-sortable="false">Detalle</th>
            </tr>

SCRIPT in HTML

<script src="{{ mix('/js/bootgrid.js') }}"></script> //must be in a first place
<script>
  $("#bootgrid-selection").bootgrid({    
    formatters: {
        "link": function(column, row)
        {           
            var pagina = 'indexofpedidosdetail/';
            var badge = '<span class="badge badge-pill badge-success">Detalle <span class="badge badge-pill badge-light">'+row.id+'</span></span>';            
            return '<a href='+pagina + row.id+'>'+badge+'</a>';
        },

        "idproceso": function(column, row)
        {       
            return '<span class="badge badge-info">'+ row.idproceso+'</span>';
        }
        
    },
   
});
</script>
  • 👍1