JavaScript实现时间轴请求后端数据进行加载显示

大体页面显示如图片（页面图片之类是当初下载的一个插件）：

（该功能在默认情况下是显示当年的全部信息，当你点击不同的年份会依次请求不同的数据表，然后按照自己的转换标准进行全部信息显示，当然js里面的字段都是数据库定义的，所以可以按照代码进行相应的修改，上面button或者下拉列表等条件当点击时进行传送数据库表名，后面进行相应的递送数据，然后再次初始化时间轴信息展示（每次都要清空一下），如果后端将数据拼接好那就prefect了。）

图片因为电脑没有网络连接，偷个懒，用手机拍了一下（放的太大，像素粒太严重），大致明白功能就好了。O(∩_∩)O哈哈~

1、页面HTML代码如下：

<div class="path-info pull-left magin-bottom" style="clear: both;">

<!--当数据加载过慢时，出现的一个浮动层-->

    <div class="trail">
<i class="fa fa-spinner fa-spin"></i> 正在加载，请稍等...    </div>

<!--没有数据时产生的一个提示-->

    <div class="trail-result">没有数据！    </div>    <div class="title"><i class="iconfont icon-guiji"></i> 轨迹信息    </div>    <div class="content" style="background-color: #F0F0F0;"><!--下面是按钮group，因为不同的条件进行切换--><div class="btnGroup">    <button type="button" class="btn btn-default activeFont" style="background-color: #2375cc;border-color: #2375cc ;" value="all">全选</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #2C9BB7;border-color: #2C9BB7 ;" value="wbswry">网吧</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #FEB42D;border-color: #FEB42D ;" value="lggnlk">旅店</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #64B24F;border-color: #64B24F ;" value="mhlkcjxx">民航</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #44B9B0;border-color: #44B9B0 ;" value="" disabled="disabled">动车</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #F57841;border-color: #F57841 ;" value="" disabled="disabled">门诊</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #5775F3;border-color: #5775F3 ;" value="" disabled="disabled">住院</button>    <button type="button" class="btn btn-default fontcolorfff" style="background-color: #B9BF15;border-color: #B9BF15 ;" value="" disabled="