footable的使用_使用footable的问题及解决方案

一 参考页面：

1 里面有一些demo可以参考 http://fooplugins.com/footable-demos/

2 从Github中下载相关插件 https://github.com/fooplugins/FooTable

主要这几个软件：

- css: footable.core.css

- -js :footable.js , bootstrap.min.js

二 写demo

//V3 版本的插件，footable.css我选择的是标准版本，还有bootstrapt版本

//在http://fooplugins.com/footable-demos/上复制下来的table

First Name

Last Name

Job Title

DOB

Status

Isidra BoudreauxTraffic Court Referee22 Jun 1972 ActiveShonaWoldt Airline Transport Pilot3 Oct 1981 DisabledGranvilleLeonardoBusiness Services Sales Representative19 Apr 1969 SuspendedEaserDragooDrywall Stripper13 Dec 1977 ActiveMapleHalladayAviation Tactical Readiness Officer30 Dec 1991 SuspendedMaxine Woldt Business Services Sales Representative17 Oct 1987 DisabledLorraineMcgaughyHemodialysis Technician11 Nov 1983 DisabledLizzee GoodlowTechnical Services Librarian1 Nov 1961 SuspendedJudiBadgettElectrical Lineworker23 Jun 1981 ActiveLauriHylandBlackjack Supervisor15 Nov 1985 Suspended

按道理就完成了footable的使用，结果是什么，你们懂的。。。就是显示不出效果，table在网上找了好多也显示不出来。用的匆忙，也没仔细看Github的提示，后来发现Github是V3，而其他的版本应该是V2。

三 两种解决方案：

1 在demo看源码，下载V2版本的插件，用里面的table。

2 在Github下载文件中，docs\examples\basic里面源码里有相关的table案例，直接拿来用。

那么V2和V3里面的属性是不同的，所以后面从ajax获取的数据在拼接字符串的时候知道用什么属性就可以了，对应上就可以了。

四 分页的实现

数据获取了，footable效果也实现了，然后我的目的还没有完成，那就是分页，用的V2版本的插件及table的代码。

1 所需要的css，js。其中paginate.js是用于分页的

`

2 主要就是将data-page-size=”5”加到table中

3 这时候遇到一个新的问题，分页效果达到了，出现了小瑕疵。

4 问题的解决：下面是bootstrapt上复制下来正常显示的，上下两个应该效果是一样的。问题出现在css中，通过图片上下两部分css的查看，发现图片上面的源码中的li部分css失效。原因是因为pagination 是在div中，而图片下面的源码中的pagination 在ul中。div(pagination)-ul-li和ul(pagination)-li，所以将bootstrapt.css中关于.pagination 部分全部复制粘贴到footable.css中，并且将带有 .pagination的class改成 .pagination>ul。比如

.pagination {

display:inline-block;

padding-left:0;

margin:20px 0;

border-radius:4px;

}

改成：

.pagination>ul {

display:inline-block;

padding-left:0;

margin:20px 0;

border-radius:4px;

}

5 最后解决啦！！一个小小的footable搞出来还真的四处碰壁

五 最终完成的demo效果图，晚上把它应用到项目中去：