BootstrapTable 自定义页脚-footer

 

在项目中碰到这样一个问题,我这个表格里面需要一个总计数,位置就想加在页码那个位置,但是搜遍了百度没有看到一个关于这个页脚修改的,倒是有一些添加footerformatter的,对于我这个需求来说没什么用,因为我想要得是不包含分页的所有数据汇总,类似这样:

就是包含所有数据的,不是当页数据。
既然找不到解决办法,那就试试来手动改一下看看
先根据页面找到这个页脚是在什么位置,我们按f12调出控制台(火狐)

OK,找到一个css类名为"pagination-info"的节点,
打开我们的bootstrap-table.js源码,搜索这个节点

一下就搜到了(作者真良心啊),然后我们来看看下面说的什么
有这样一行代码:

this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),

根据和页面上的代码对比,我们差不多可以猜到是什么了,这里有一个成员函数和几个参数,我们顺着这个成员函数继续往下找,看看是怎么实现的:

 

根据名字搜索,我们马上定位到这个函数的实现,可以看到是根据上面几个参数来实现的这句话,然后呢,我们来看一下这个参数是在什么地方传过来的,再回到刚刚的代码:

我们需要找到这个options在哪里进行了赋值操作,当然 我们按名字搜索,那么这一个页面基本上都是这个,我们得另外想一种办法,我们去直接搜索后面的totalRows,好,现在就只有一个结果,我们来依次查看:

文档的最上方,很容易看出这个是设置默认值,好的我们继续往下(跳过我们上面看到的那一段设置页码文字的代码),在页面下方有这样几句代码:

 可以看出这是一个请求操作,对比我们在使用中的设置很容易明白这就是我们通过表格获取数据的代码,而且 这个totalRows的赋值就在这里,同样 页面上没有更多的搜索结果,好了,现在我们得到这样几个信息:
    1. 需要给options对象加一个我们需要的属性,设置它的默认值。
    2. 在这个位置去给他获取属性值,也就是数据。
    3. 修改代码呈现最终效果。
OK,我们来开始修改
首先增加一个属性:

就叫goldNumber吧,放在totalRows下面,以便于修改,
其次,在获取数据的地方给它赋值:

这里的totalGolds就是你请求结果的json对象的名字
然后,我们再添加一个跟页码类似的函数

放在一起,好操作
OK,最后一步,调用我们的函数:

绕了一圈又回到原点。
事情做完了,来我们看一下结果

结果出来了,跟我当初想的一样,以上就是修改这页脚的方法,当然,里面放的都是html代码,你可以根据自己的需要写出自己想要的效果。
哦,最后再分享一下我服务端返回的数据结果以供参考:

看图直观点,大家跟着改一下就行了,其他代码就懒得贴了。

请轻喷!

 

posted @ 2017-08-14 17:26  suchi  阅读(17640)  评论(0编辑  收藏  举报