Como puedo poner botones en las tablas.

silens

Muy buenas, me gustaría poder poner un boton en cada fila para lanzar un formulario, he visto en esta web : https://datatables.net/extensions/buttons/ que se pueden poner pero hay que añadir algun archvo en la web.
Mi pregunta es: Cual es la mejor forma para poner botones en la tabla,? ¿Hay algún ejemplo? Gracias

jsanc223

Hola Silens

El setup the tu table debe ser de la siguiente manera:
$('#myDataTable').DataTable({
bProcessing: true,
bStateSave: true,
order: [0, 'desc'],
dom: 'Bfrtip',
lengthMenu: [
[20, 25, 50, -1],
['20 rows', '25 rows', '50 rows', 'Show all']
],
buttons: [
'excelHtml5',
'pageLength'
]
});

Finalmente, agrega los siguientes Scripts y Styles a tu pagina

script src="@Url.Content("https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js")"></script>



}
@section styles {
<link href="@Url.Content("https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css")" rel="stylesheet" type="text/css" />
}

silens

Muy buenas, muchas gracias por contestar, asi tengo mi funcion.

 function tarea(n_tarea){
  var disparador='2';//Me vale para saber que funcion es la que esta llamandoa identidades
  var parametros = {//Las variables que le paso
        
        "tarea": n_tarea, //A la variable cif, le asigno el dni, ahora mismo vacio
        "disp":disparador, // a n_Historia le asigno el disparador de historia que es este caso es 1
    };
  
    
  tabla_tarea = $('#tbl_entidad2').DataTable( { //Voy a necesitar la variable tabla
       
 bProcessing: true,
bStateSave: true,
order: [0, 'desc'],
dom: 'Bfrtip',
lengthMenu: [
[20, 25, 50, -1],
['20 rows', '25 rows', '50 rows', 'Show all']
],
buttons: [
'excelHtml5',
'pageLength'
]
       
          
      "destroy": "true", //Esto lo hago para que no me de error el datatable cuando lo vuelvo a inicializar una vez cargado.
    
        "ajax": {
            "url": "php/identidades.php", //web a la que llamo y hace el trabajo.
             "type": "POST", //Metodo usado por la funcion para pasar variable
            "dataSrc": "",
            "data": parametros, //En el data meto la variable cif con el contenido de dni, es formato json
        
        },
                
        "columns": [
            { "data": "id" }, //Estas son las colunas del json
            { "data": "name" },
            { "data": "dsc" },
            { "data": "historias" }
           ]
           
    } );
    
    
    
     $('#tbl_entidad2 tbody').on('click', 'tr', function () {
        var data = tabla_tarea.row( this ).data();
        
        alert( data['name']);
        
    } );
    
    
    
 }

Algo debo de hacer mal, no me ejecuta nada, no me funciona. que hago mal?

silens

Solo necesito un boton que ejecutte una funcion. Muchas gracias

silens

Buenas, asi es como lo he hecho,

 "columns": [
            { "data": "id" }, //Estas son las colunas del json
            { "data": "name" },
            { "data": "dsc" },
            { "data": "proyecto_name" },
            { "data": "prsp_def" },
            { "data": "prsp_ctb" },
            {"defaultContent": "<button type='button' class='form btn btn-primary btn-xs '> <span class='glyphicon glyphicon-search'></span></button>"}
            ]

$('#tbl_entidad tbody').on('click', 'button.form', function () //Al hacer click sobre el boton button.form de la linea de arriba
        {
           var data_form = tabla.row($(this).parents("tr")).data();
            prueba="2"; //Pongo la variable a dos para saber que he pasado por aqui
            //Oculto las dos tablas, cargo y muestro el div
            $('#tbl_Historias').hide(400);//Oculto las dos tablas
            $('#tbl_Tareas').hide(400);
            
                $('#formulario').load('formulario.html'); //Cargo la web en el div
                $('#formulario').show(100);//Muesto el div formulario

    } );

Asi me funciona, Un saludo