小技巧:获取bootstrap-table组件生成表格的总行数

  用过bootstrap-table表格组件的朋友都知道,它灰常强大,几乎涵盖了我们所能用到的全部功能,为开发者们提供了极大便利,感谢作者~
  博主在使用过程中,发现bootstrap-table官网文档经常打不开,貌似网站部署在境外,有被墙的可能……

  博主收藏的这两个网址,大家留着备用~
  bootstrap-table 离线API
  bootstrap-table 中文文档

   在实际开发中,我们往往需要获取到表格的总行数,比如:使用bootstrap-table中的updateRow方法,来更新表格中的所有行数据,博主查阅文档API,并没有发现可以直接获取表格总行数的API,网上也没找到相关参考,这可能是bootstrap-table作者疏忽啦。
  博主,在表格页面底部,发现有显示表格的记录数,即总行数。
记录数
其实作者在源码里写了存储总行数的变量,通过F12审查元素,发现总行数位于类名pagination-info的span标签里面。
pagination-info
  我们打开bootstrap-table.js源码文件,按Ctrl+F搜索pagination-info,定位到此处,果然发现了作者用this.options.totalRows存储表格总行数。既然有存储这个值,事情就变得非常简单啦,我们可以使用HTML5的自定义data属性将this.options.totalRows这个值暴露出来,如下代码所示,加一个标签属性data-totalrows
修改源码

1
2
// 第一步:在bootstrap-table.js源码中修改
<span data-totalrows="' + this.options.totalRows + '" class="pagination-info">

  这个小改动对源码没有任何影响,我们可轻松获取到表格的总行数,如下代码所示。

1
2
3
// 第二步:选择 #table表格 下的 .pagination-info DOM元素,获取data-totalrows的值
var totalRows = document.querySelector('#table .pagination-info').dataset['totalrows'];
console.log('totalRows' + totalRows);

-------- The End --------
坚持原创技术分享,您的支持将鼓励我继续创作!
0%