Tengo una tabla Javascript HTML simple y estoy cargando datos de un archivo javascript que contiene los datos en formato JSON. Todo parece funcionar perfectamente bien. Ahora quiero agregar dos botones Ver y Eliminar que, al hacer clic, irán a otra página o ejecutarán otra función de JavaScript. ¿Puede alguien ayudarme a descubrir cómo agregar el botón en el código dado?
Código HTML :
<table class="table-striped border-success"> <thead> <tr> <th data-field="id"> <span class="text-success"> ID </span> </th> <th data-field="fName"> <span class="text-success"> First Name </span> </th> <th data-field="lName"> <span class="text-success"> Last Name </span> </th> </tr> </thead> </table> </div> <!-- Include the file where the JSON data is stored --> <script type="text/javascript" src="test.js"> </script> <script type="text/javascript"> $(document).ready(function () { // Use the given data to create // the table and display it $('table').bootstrapTable({ data: mydata }); }); // Parse the imported data as JSON // and store it var mydata = JSON.parse(da) </script> </body> </html>Test.js (código Javascript que contiene datos JSON):
var da = `[ { "id": "24323", "fName": "Mark ", "lName": "Smith" }, { "id": "24564", "fName": "Caitlin", "lName": "MacDonald" } ]`;Puedes agregar los 2 botones algo como esto
<table class="table-striped border-success"> <thead> <tr> <th data-field="id"> <span class="text-success"> ID </span> </th> <th data-field="fName"> <span class="text-success"> First Name </span> </th> <th data-field="lName"> <span class="text-success"> Last Name </span> </th> <th data-field="view"> <span class="text-success"> View </span> </th> <th data-field="delete"> <span class="text-success"> Delete </span> </th> </tr> </thead> </table> </div> <!-- Include the file where the JSON data is stored --> <script type="text/javascript" src="test.js"> </script> <script type="text/javascript"> $(document).ready(function () { // Use the given data to create // the table and display it $('table').bootstrapTable({ data: mydata, columns:[{},{},{}, { field: 'operate', title: 'View', align: 'center', valign: 'middle', clickToSelect: false, formatter : function(value,row,index) { return '<button type=\'button\' onclick=\'gotoPage()\'>View</button>'; }, { field: 'operate', title: 'Delete', align: 'center', valign: 'middle', clickToSelect: false, formatter : function(value,row,index) { return '<button type=\'button\' onclick=\'delete()\'>Delete</button>'; } }); }); function gotToPage(){ window.location.href = '/somepage' } function delete(){ // Your delete functionality } // Parse the imported data as JSON // and store it var mydata = JSON.parse(da) </script>