How to put a button inside a table

If you are using RAZOR, you could do something like this ... as long as your @model is a list of the object you want to iterate on the grid.

<div class="table-responsive">
<table id="Grid"
        data-toggle="table"
        data-url="@Url.Action("Metodo", "Controller")"  
        data-method="post"
        data-pagination="true"
        data-page-size="7"
        data-search="true"
        data-show-toggle="true"
        data-show-columns="false"
        data-striped="true"
        data-show-export="false"
        data-show-refresh="true"
        data-buttons-class ="primary">
    <thead>
        <tr>
            <th data-field="Data1" data-sortable="true">Col1</th>
            <th data-field="Data2" data-sortable="true">Col2</th>
            <th data-field="Data3" data-sortable="true">Col3</th>
            <th data-field="Data4" data-sortable="true">Col4</th>
            <th data-field="Data5" data-sortable="true">Col5</th>
            <th >DETALLES</th>                    
        </tr>
    </thead>                       
    <tbody>
        <!-- informacion de la tabla-->   
        @foreach(var dato in @model){
             <tr>
                  <td>@dato.Data1</td>
                  <td>@dato.Data2</td>
                  <td>@dato.Data3</td>
                  <td>@dato.Data4</td>
                  <td>@dato.Data5</td>
                  <td>@HTML.ActionLink("Ir a detalle","Details",{id = dato.Id})</td>
             </tr>
        }
    </tbody>
</table>

* Disculate if you can have syntax errors, but it is the idea, action link is part of the html razor helper this generates the link to go to a certain action of the current controller, but you can put a button or a <a> element, that depends on how you want to show it.

If you wanted to put a button I would do it in the following way:

<a class="btn btn-default" href="@html.actionlink("","Details",{[email protected]})">Ir a detalle</a>

The btn classes will work and the <a> element will be shown as a button if you have bootstrap agreagdo to the project.

Greetings.

How are you using BoostrapTable the right code for you would be something like this:

This part stays the same:

<div class="table-responsive">
    <table id="Grid"
            data-toggle="table"
            data-url="@Url.Action("Metodo", "Controller")"  
            data-method="post"
            data-pagination="true"
            data-page-size="7"
            data-search="true"
            data-show-toggle="true"
            data-show-columns="false"
            data-striped="true"
            data-show-export="false"
            data-show-refresh="true"
            data-buttons-class ="primary">
        <thead>
            <tr>
                <th data-field="Data1" data-sortable="true">Col1</th>
                <th data-field="Data2" data-sortable="true">Col2</th>
                <th data-field="Data3" data-sortable="true">Col3</th>
                <th data-field="Data4" data-sortable="true">Col4</th>
                <th data-field="Data5" data-sortable="true">Col5</th>
                <th >DETALLES</th>                    
            </tr>
        </thead>                       
        <tbody>
            <!-- informacion de la tabla-->             
        </tbody>
    </table>
</div>

In the JS when you generate the bootstrapTable object, you will have to specify the content of your columns, you have 5 columans that will not be specified: {}, {}, {}, {}, {},

$('#Grid').bootstrapTable({
                columns: [ {},{},{},{},{},
                {
                  title: 'Details',
                  align: 'center',
                  valign: 'middle',
                  clickToSelect: false,
                  formatter : function(value,row,index) {
                    //Aqui defines el boton y en tu caso tendras que ponerle el onClick, 
                    //recuerda que row tiene el objeto del renglon actual, 
                    //en este ejemplo agrege funcionPorDefinir y le envio el row.id
                    return '<button class=\'btn btn-primary \' onClick="funcionPorDefinir(row.id)"  >Mostrar Detalles</button> ';
                  }
                }
              ]               
              });

According to what the boostrapTable documentation says, your code would have to be something like that.

Greetings.

This should work:

<div class="table-responsive">
    <table id="Grid"
            data-toggle="table"
            data-url="@Url.Action("Metodo", "Controller")"  
            data-method="post"
            data-pagination="true"
            data-page-size="7"
            data-search="true"
            data-show-toggle="true"
            data-show-columns="false"
            data-striped="true"
            data-show-export="false"
            data-show-refresh="true"
            data-buttons-class ="primary">
        <thead>
            <tr>
                <th data-field="Data1" data-sortable="true">Col1</th>
                <th data-field="Data2" data-sortable="true">Col2</th>
                <th data-field="Data3" data-sortable="true">Col3</th>
                <th data-field="Data4" data-sortable="true">Col4</th>
                <th data-field="Data5" data-sortable="true">Col5</th>
                <th >DETALLES</th>                    
            </tr>
        </thead>                       
        <tbody>
            <tr>
              <td>Contenido1</td>
              <td>Contenido2</td>
              <td>Contenido3</td>
              <td>Contenido4</td>
              <td>Contenido5</td>
              <td><button>Botón Detalles</button></td>
            </tr>
        </tbody>
    </table>
</div>

I added a new row in the body (tag tr) with its six columns (td tag). In the last one, which corresponds to the DETAILS column, I added a button.

The contents of the other columns and the configuration of the button are already in your hand.