bootstrap的footable分页组件如何使用

hardbull 2019-05-03 11:32:39

大家好，bootstrap的footable组件，在静态页面中能正常分页，但如果生成一个动态的innerHTML字符，就无法分页了，请大牛帮忙看看：
贴出返回的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="footable.all.min.js"></script>

</HEAD>
<BODY>
<div id="aa">
</div>
<form class="form-inline" role="form">
<input type="button" id="b1" class="btn btn-primary" onclick="f1()" value="测试"/>
</form>
<script>
function f1(){
html="<table class=\"footable table table-striped\" data-page-size=\"8\" data-filter=\"#filter\">"
+"<thead><tr><td>#</td><td>姓名</td><td>年龄</td><td>性别</td></tr></thead><tbody>"
+"<tr><td>1</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>2</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>3</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>4</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>5</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>7</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>8</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>10</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>11</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>12</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>13</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>14</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>15</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>16</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>17</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>18</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>19</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>20</td><td>张三</td><td>33</td><td>男</td></tr>"
+"<tr><td>21</td><td>张三</td><td>33</td><td>男</td></tr>"
+"</tbody ><tfoot><tr><td colspan=\"4\"><ul class=\"pagination pull-right\"></ul></td></tr></tfoot></table>";
document.getElementById("aa").innerHTML=html;
}
</script>
<script src="footable.all.min.js"></script>
<script>
$(document).ready(function () {
$(".footable").footable();
});
</script>
</BODY>
</HTML>

...全文