Francisco Fernandez Francisco Fernandez - 3 months ago 12
Javascript Question

Footable don't load

I'm using the plugin Footable, FootablePaginate for an html table created with an ajax call but I don't know what is wrong, when document loads the table is there but there is no Footable options until I press F12, then appears the paginate from Footable but appears like this:

Footable

Footer is wrong and I put the option to show 1 row per page but when table load shows all the rows and the when I change the page appears the determinate number of pages.

Here is my table:

<div class="panel-body">
<div class="table-responsive">
<table class="footable" id="Tabla2" data-page-size="1">
<thead>
<tr class="info">
<td>ID<span class="hidden-xs"></span></td>
<td>Revision<span class="hidden-xs"></span></td>
<td>Proposito<span class="hidden-xs"></span></td>
<td>OpenDate<span class="hidden-xs"></span></td>
<td>CloseDate<span class="hidden-xs"></span></td>
<td>Copias<span class="hidden-xs"></span></td>
<td>Estatus<span class="hidden-xs"></span></td>
<td>DueƱo<span class="hidden-xs"></span></td>
<td>Modelo<span class="hidden-xs"></span></td>
<td>Familia<span class="hidden-xs"></span></td>
<td>VS<span class="hidden-xs"></span></td>
<td>Estacion<span class="hidden-xs"></span></td>
<td>FollowUp<span class="hidden-xs"></span></td>
<td>FollowUpNumber<span class="hidden-xs"></span></td>
<td><span class="fa fa-cogs"></span></td>
</tr>
</thead>
<tbody id="TablaAlertas">
<tr></tr>
</tbody>
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="5">
<div class="pagination pagination-centered"></div>
</td>
</tr>
</tfoot>
</table>

</div>
</div>


And here is my JavaScript code, I tried to add this function in the same JS file where I draw the table (ajax call) and also I tried to execute the function in the page header but I get the same result.

$(document).ready(function () {
$('#Tabla2').footable();
});


EDIT:

AJAX call:

Is basically a MySQL query (Select *) and here is the js code:

success: function (data) {
//Conversion de los datos obtenidos a un arreglo de JSON
var aRC = JSON.parse(data.d);
//Variable lineas que permitira dibujar la tabla HTML
var lineas = "";
//FOR para recorrer el arreglo
for (var i = 0; i < aRC.length; i++) {
//Variables que guardaran el dato obtenido en el arreglo
var id = ("00000" + (parseInt(aRC[i].Id)));
var zerofillid = id.substring(id.length - 5);
//var id = aRC[i].Id;
var num = zerofillid;
var rev = aRC[i].Revision;
var pur = aRC[i].Purpose;
var open = aRC[i].Open;
var close = aRC[i].Close;
var copies = aRC[i].Copies;
var status = aRC[i].Status;
var owner = aRC[i].Owner;
var mod = aRC[i].Model;
var fam = aRC[i].Family;
var vs = aRC[i].ValueStream;
var sta = aRC[i].Station;
var fu = aRC[i].Follow;
var fun = aRC[i].FollowNumber;

//Creacion de cada TR para cada dado obtenido
lineas += '<tr id="P' + zerofillid + '" data-id="' + zerofillid + '">';
//lineas += '<td id="P' + id + '-1">' + aRC[i].Id + '</td>'
lineas += '<td>' + num + '</td>';
lineas += '<td id="P' + zerofillid + '-1">' + rev + '</td>';
lineas += '<td id="P' + zerofillid + '-2">' + pur + '</td>';
lineas += '<td id="P' + zerofillid + '-3">' + open + '</td>';
lineas += '<td id="P' + zerofillid + '-4">' + close + '</td>';
lineas += '<td id="P' + zerofillid + '-5">' + copies + '</td>';
lineas += '<td id="P' + zerofillid + '-6">' + status + '</td>';
lineas += '<td id="P' + zerofillid + '-7">' + owner + '</td>';
lineas += '<td id="P' + zerofillid + '-8">' + mod + '</td>';
lineas += '<td id="P' + zerofillid + '-9">' + fam + '</td>';
lineas += '<td id="P' + zerofillid + '-10">' + vs + '</td>';
lineas += '<td id="P' + zerofillid + '-11">' + sta + '</td>';
lineas += '<td id="P' + zerofillid + '-12">' + fu + '</td>';
lineas += '<td id="P' + zerofillid + '-13">' + fun + '</td>';
lineas += '<td>';
//Botones de accion
lineas += ' <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="' + zerofillid + '"></span>';
lineas += ' </td>';

lineas += '</tr>';


}
//Id de donde se dibujara la variable lineas
$('#TablaAlertas').html(lineas);
}


EDIT 2:

The table also works when I re-size the window

Answer

Here comes the magic... are you ready? Just add this line in your ajax call js file:

   //Id de donde se dibujara la variable lineas
    $('#TablaAlertas').html(lineas);
    $('#Tabla2').footable();
}