我使用插件Footable,FootablePaginate来创建一个用ajax调用创建的html表,但是我不知道什么是错的,当文档加载表时,我没有Footable选项直到我按F12,然后出现Footable的分页,但看起来像这样:
页脚错误,我将选项显示为每页显示1行,但当表格加载显示所有行时,我更改页面的时间显示确定的页数。
这是我的表:
<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>
这是我的JavaScript代码,我试图将这个函数添加到我绘制表(ajax调用)的同一个JS文件中,并且我尝试在页眉中执行该函数但是得到了相同的结果。< / p>
$(document).ready(function () {
$('#Tabla2').footable();
});
修改
AJAX电话:
基本上是MySQL查询(Select *),这里是js代码:
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);
}
编辑2:
当我重新调整窗口大小时,该表也可以使用