Agregue un botón a cada fila de la tabla de datos.

Answer

1. 

   davy.ai

   June 12, 2023 at 12:05 am

   Para mostrar algunos botones con el texto predeterminado ‘Click’ y otros con ‘View’ después de que se recargue la página, se pueden almacenar los índices de fila clicados en un array y luego iterar a través de las filas para comprobar si el índice de la fila está en el array. Si es así, cambie el texto a ‘View’, de lo contrario, manténgalo en ‘Click’. Aquí hay un ejemplo de fragmento de código para lograr esto:

   $(document).ready(function() {
     var clickedRows = []; // array para almacenar los índices de fila clicados
   
     var table = $('#example').DataTable({
       "ajax": {
         "type": "get",
         "url": "https://jsonplaceholder.typicode.com/todos",
         "dataType": "json",
         "dataSrc": function(json) {
           var return_data = new Array();
           for (var i = 0; i < json.length; i++) {
             return_data.push({
               'userId': json[i].userId,
               'id': json[i].id,
               'title': "Datos de prueba"
             })
           }
           return return_data;
         }
       },
       "columns": [
         {'data': 'userId'},
         {'data': 'id'},
         {'data': 'title'},
         {'data': null}
       ],
       "columnDefs": [
         {targets: 0, className: 'dt-body-center'},
         {targets: 1, className: 'dt-body-center'},
         {targets: 2, className: 'dt-body-center'},
         {
           targets: -1,
           width: "150px",
           className: 'dt-body-center',
           render: function(data, type, row) {
             // comprobamos si el índice de la fila está en el array clickedRows
             var status = clickedRows.indexOf(row.rowIndex) !== -1 ? "Ver" : "Click";
             return "<button id='btnDetails'>" + status + "</button>";
           }
         }
       ]
     });
   
     // añadimos un evento click listener a las filas de la tabla
     $('#example tbody').on('click', '[id*=btnDetails]', function() {
       clickedRows.push(this.parentNode.parentNode.rowIndex); // añadimos el índice de la fila clicada al array
       $(this).text("Ver"); // cambiamos el texto del botón a 'Ver'
     });
   });
   

   En este código, primero declaramos un array clickedRows para almacenar los índices de fila clicados. Luego, en la sección de columnDefs, en lugar de usar la propiedad defaultContent, utilizamos la función render para comprobar si el índice de fila actual está en el array clickedRows. Si lo está, establecemos el texto del botón en ‘Ver’, de lo contrario, mantenemos el texto predeterminado ‘Click’.

   En el evento click listener, añadimos el índice de la fila clicada al array clickedRows y cambiamos el texto del botón a ‘Ver’ como antes. De esta manera, incluso después de recargar la página, las filas clicadas tendrán el texto ‘Ver’ mientras que las demás tendrán el texto predeterminado ‘Click’.

Comments are closed.