1

Tengo el siguiente código:

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

El problema es el siguiente, en la columna detalles deseo agregar un botón para dirigirse al detalle de cada columna, ya busqué algunos ejemplos pero no más no doy... me pone el botón en el encabezado. ¿Cómo puedo hacerlo?

1
  • Como agreags la informacion al Tbody??? el 16 abr. 2018 a las 19:09

2 respuestas 2

1

Si estas usando RAZOR, podrias hacer algo como esto... siempre y cuando tu @model sea una lista del objeto que quieras iterar en el 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>

*Discula si pueda tener errores de sintaxis, pero es la idea, action link es parte del html helper de razor este genera la liga para ir a una determinada accion del controller actual, pero puedes poner un boton o un <a> element, eso ya depende de como lo quieras mostrar.

Si quiesieras poner un boton yo lo haria de la siguietne manera:

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

Las clases btn funcionaran y el elemento <a> se mostrara como boton si tienes bootstrap agreagdo al proyecto.

Saludos.

Como estas utlizando BoostrapTable el codigo correcto para ti seria algo asi:

Esta parte queda igual:

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

En el JS cuando generes el objeto bootstrapTable, tendras que especificar el contenido de tus columnas, tienes 5 columans que no seran especificadas: {},{},{},{},{},

$('#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> ';
                  }
                }
              ]               
              });

Segun lo que dice la documentacion de boostrapTable, tu codigo tendria que ser algo asi.

Saludos.

5
  • Si, si estoy usando razor, pero si los datos que llenan el grid son de una lista, y lo inserto desde el 'data-field="Data1" ' que seria el nombre del campo en SQL donde toma el valor, no entiendo como quedaría la parte de abajo del foreach el 16 abr. 2018 a las 19:45
  • Pregunta, si no estas pasando los datos en el @model, en donde tienes los datos?? estas utilizando javascript?? o algun complemento de jquery o de AngularJS?? que componente estas utilizando para el grid? el 16 abr. 2018 a las 19:49
  • Errores de novato, estoy pasando un Json desde el controller con la lista de datos: public ActionResult GetDownTime() { AndonEntities db = new AndonEntities(); var list = db.DownTime.ToList(); return Json(list,JsonRequestBehavior.AllowGet); } el 16 abr. 2018 a las 19:53
  • Si pero estas utilizando algun componente verdad? pareciera que es el BoostrapTable... tienes algo como est: $("#Grid").bootstrapTable({ el 16 abr. 2018 a las 19:55
  • Si es correcto, es un boostrap-table el 16 abr. 2018 a las 19:56
0

Esto debería funcionar:

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

He añadido en el body una nueva fila (etiqueta tr) con sus seis respectivas columnas (etiqueta td). En la última, la que corresponde a la columna DETALLES, he añadido un botón.

Ya queda de tu mano el contenido de las otras columnas y la configuración del botón.

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.