Adding buttons to table rows in a loop generated table

Question

I have a loop generated table that fills its rows using an object array retrieved from a database query.

This is the coda that generates the table

indices = ["razonSocial", "nombre1", "telefonoFijo1", "telefonoMovil1", "correoElectronico1", "clave"];
indiceBotones = ["id"];
var selectArray = [];
jQuery.each(returned.listaproveedorfamilia, function(i, val) {                   
    selectArray.push({
        "id": val.id,
        "razonSocial": val.razonSocial, 
        "nombre1": val.nombre1,
        "telefonoFijo1": val.telefonoFijo1,
        "telefonoMovil1": val.telefonoMovil1,
        "correoElectronico1": val.correoElectronico1,
        "clave": val.clave
    });
});

$.each(selectArray, function(i, selected) {
    var tr = $('<tr>');
    $.each(indices, function(i, indice) {
        $('<td>').html(selected[indice]).appendTo(tr);
    });
    $.each(indiceBotones, function(i, indiceBoton){
        //Here I need to add the code for the two buttons in the same cell
    });
    tbody.append(tr);
});

This is how the table looks

And I want it to have buttons like this in the last column

This is an example of the code generated by the loop for every row

<tr>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>PCR</td>
</tr>

After the last td, and additional td should be added containing the following tags

<td>
    <a title="Editar" href="<?php echo site_url('proveedor/edit/' HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-info btn-xs"><span class="fa fa-pencil"></span></a> 
    <a title="Eliminar" href="<?php echo site_url('proveedor/remove/'HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
</td>

So for every row, the following code shoud be created

<tr>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>00020</td>
    <td>PCR</td>
    <td>
        <a title="Editar" href="<?php echo site_url('proveedor/edit/' HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-info btn-xs"><span class="fa fa-pencil"></span></a> 
        <a title="Eliminar" href="<?php echo site_url('proveedor/remove/'HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
    </td>
</tr>

How could I modify the loop to generate these tags? Thanks for your help.

I think you don't need the loop for the buttons. It seems you just need to add the two <td><button></button></td> after the inner $.each loop that is fetching indices. — Sithu Kyaw
– Sithu Kyaw, Commented Apr 19, 2017 at 20:45

blex · Accepted Answer · 2017-04-19 20:54:15Z

1. Dynamic URLs

Since your URLs are going to be generated with JS, you need to let it know what your site URL is. You could hardcode it in your JS, or make it dynamic, so that it does not break if you switch domains. To do this, you can add this as the first <script> tag in your PHP page's <head> section:

<script>window.SITE_ROOT = "<?php echo site_url('/'); ?>";</script>

It will create a global variable that your JS can then access.

2. Adding the buttons

Then, you can use this variable in your code:

$.each(indiceBotones, function(i, indiceBoton){
    $('<td>').html(
                     '<a title="Editar" href="' + SITE_ROOT + 'proveedor/edit/' + selected[indiceBoton] + '">Edit</a> ' 
                   + '<a title="Eliminar" href="' + SITE_ROOT + 'proveedor/remove/' + selected[indiceBoton] + '">Remove</a>'
                  ).appendTo(tr);
});

3. Demo

Check out the below demo to see how everything should work:

// For the demo
var returned = {listaproveedorfamilia:[{id:1,name:"John"},{id:2,name:"Jessica"},{id:3,name:"Peter"},{id:4,name:"Harry"},{id:5,name:"Celia"}]},
    tbody = $('table tbody');

// Nothing changed here, I just simplified the data structure for the demo
indices = ["name"];
indiceBotones = ["id"];
var selectArray = [];
jQuery.each(returned.listaproveedorfamilia, function(i, val) {                   
    selectArray.push({
        "id": val.id,
        "name": val.name
    });
});

$.each(selectArray, function(i, selected) {
    var tr = $('<tr>');
    $.each(indices, function(i, indice) {
        $('<td>').html(selected[indice]).appendTo(tr);
    });
    
    // Here, we use the SITE_ROOT variable to create the links
    $.each(indiceBotones, function(i, indiceBoton){
        $('<td>').html(
          '<a title="Editar" href="' + SITE_ROOT + 'proveedor/edit/' + selected[indiceBoton] + '">Edit</a> ' 
        + '<a title="Eliminar" href="' + SITE_ROOT + 'proveedor/remove/' + selected[indiceBoton] + '">Remove</a>'
        ).appendTo(tr);
    });
    tbody.append(tr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The following line should be the first script loaded in the <head> section.
     It will allow your JS script to know what the site root is.
     This is the output of "echo site_url('/')": -->
<script>window.SITE_ROOT = "http://yoursite.com/";</script>

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Options</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>

Varinder · Accepted Answer · 2017-04-19 20:44:01Z

You could follow the same logic as you have for the other table cells. I don't believe <?php echo site_url() ?> would resolve to site url when being executed in javascript. Instead, the easiest workaround would be to hard-code starting url path

...
$.each(selectArray, function(i, selected) {
    var tr = $('<tr>');
    $.each(indices, function(i, indice) {
        $('<td>').html(selected[indice]).appendTo(tr);
    });
    $.each(indiceBotones, function(i, indiceBoton){
        var itemId = selected[indiceBoton];

        var editButtonUrl = "/proveedor/edit/" + itemId;

        var editButtonHtml = "<a title='Editar' href='" + editButtonUrl + "' class='btn btn-info btn-xs'><span class='fa fa-pencil'></span></a>";

        var deleteButtonUrl = "proveedor/remove/" + itemId;

        var deleteButtonHtml = "<a title='Eliminar' href='" + deleteButtonUrl + "' class='btn btn-danger btn-xs'><span class='fa fa-trash'></span></a>";

        $('<td>').html(editButtonHtml + deleteButtonHtml).appendTo(tr);
    });
    tbody.append(tr);
});

Collectives™ on Stack Overflow

Adding buttons to table rows in a loop generated table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related