Bootstrap3集成Filterable的经历

背景

Angularjs工程 bootstrap3

项目中的表格想要集成Filterable插件。实现在表头筛选表格内容。效果如下

过程

Filterable的git地址Filterable

下载Demo中的download.zip在本地运行，发现是bootstrap2版本

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link href="./libs/bootstrap-editable.css" rel="stylesheet">
<link href="../src/bootstrap-filterable.css" rel="stylesheet">
<link href="http://lightswitch05.github.io/filterable/stylesheets/main.css" rel="stylesheet">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./libs/bootstrap-editable.min.js"></script>
<script src="./libs/jquery.filterable.min.js"></script>

bootstrap-combined.no-icons.min.css在bootstrap3中没有找到，应该是变成了bootstrap.min.css。
bootstrap.min.js替换成了3.3.7版本。
bootstrap-editable.min.js是1.5.1版本对应bootstrap3，发现会报typeahead找不到的错误，
在网上找到了bootstrap3-typeahead.min.js发现还是报错，最后看X-editable官网demo中有支持bootstrap3的例子，下载下来看例子的源码，发现引入了typeaheadjs.js，其实还引入了其他很多混淆的js文件，对比之后发现typeaheadjs.js是有用的。
jquery.filterable.min.js是filterable的支持文件。
文件引入了之后可以运行了，有两个问题：

1. 每列的表头上没有filter的图标
2. 输入的时候没有模糊匹配的下拉列表

问题1：后来仔细对比官网demo的控制台的index.html文件发现，代码使用filterable()的时候加了参数

$("#baseTable").filterable({editableSelector: 'i.fa.fa-filter'})

并且在th中加入了i标签，editableSelector的意思是用图标来控制filterable，如果不设置，就是表头来控制。
问题2：debugger源码发现，typeaheadjs文件中

this.$input.typeahead(this.options.typeahead);

应该是起作用的地方，其中this.options.typeahead为null，所以不显示模糊列表。看了一些官网的demo代码，发现这里一般传递的是数组，而this.options.source就是应该传递的数组，所以改动了源码，替换成了this.options.source。这里没有深入了解其原理，只是结果导向，直接使用source。
到此，filterable插件引入就完成了，效果如上面所示。
贴一下文件引入情况：

css省略。。。
<script src="xx/bootstrap.min.js"></script>
<script src="xx/bootstrap3-typeahead.min.js"></script>
<script src="xx/bootstrap-editable.min.js"></script>
<script src="xx/typeaheadjs.js"></script>
<script src="xx/jquery.filterable.min.js"></script>