ajax表格插件footable 的使用技巧和心得

我们在编程过程中多少都会使用到表格，如果要想表格美观适用的话，就会用到各种表格插件，footable就是其中一种，这个插件还是很好用的，功能强大，那么就随Alex一起来看看怎么使用吧。

之前在开发一个编辑考核模块的时候使用footable 插件的时候遇到了排序的问题折腾了好久网上也没找到文档所有在这里记录下来提供给有需要的同学参考一下:

写法:

<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="1000"  data-sorting="true">
<thead>
<tr>
<th data-toggle="true" data-sort-ignore="true">作者</th>
<th >提交数</th>
<th >不合格数</th>
<th >业绩分</th>
<th >扣分</th>
<th data-type="number">得分</th>
<th data-hide="all">详情</th>
</tr>
</thead>

<tbody>
<tr>
<td>rrr</td>
<td >111</td>
<td data-value="1"><font style="color:#ff0099;">1</font></td>
<td data-value="2"><font style="color:#0066cc;">2</font></td>
<td data-value="3"><font style="color:#cc0033;">3</font></td>
<td data-value="4"><font style="color:#006600;">4</font></td>
<td>
<!--子表-->

<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>站点</th>
<th>机构代号</th>
<th>页面</th>
<th>数量</th>
<th>不合格数</th>
</tr>
</thead>
<tbody>

<tr>
<td>6</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>

</tbody>
</table>

<!--子表-->
</td>
</tr>

</tbody>
tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>

说明:
data-page-size="1000"    #表示分页中每页显示多少条
data-sort-ignore="true"    #取消排序
data-hide="all"    #设置该字段为隐藏下拉字段
data-value="1"    #为设置单元格的值 这里是按照数字排序的关键 如果你不设置值的话排序都是按照字符串排序

时间有限先说到这里最近比较忙 我上面是隐藏字段里面又嵌套了一个表格。

这个插件效果还不错，赶紧试试吧，对了首先你的下载这个插件，网上搜一下就有了。