Comments (1)
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>
from jquery-bootgrid.
Related Issues (20)
- Get all rows (ajax: true)
- Wrong page calculation for linkes "next" and "prev" pages HOT 1
- How to use with local language?
- Any solution for natural sorting?
- Problems deleting in bootgrid / Problemas al eliminar en bootgrid
- Bootgrid and .Net Core Ajax Posting not working ...
- 关于初始化的问题
- Filtering between dates
- How to customize row background based on a field value? HOT 1
- Any plan to update? HOT 2
- Bootstrap 4 HOT 1
- thead fixed and tbody scrollable
- Jquery bootgrid icon is not displaying in web app HOT 1
- how to load static columns and data to jQuery-bootgrid HOT 1
- how to delete row in Jquery boot grid
- Jquery Bootgrid Header Checkbox(Hide/Show) Table columns Customize and place in userdefined Dropdown?
- individual Column Search on top of each column in bootgrid?
- Passing json variable to bootgrid table
- Tooltip in cell
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-bootgrid.