正文

bootstraptable使用及遇到的问题

今日事今日毕  2022-02-16  126

关键词：

本人前端菜鸟一枚，最近使用bootstrap table实现表格，记录一下以便日后翻阅，废话不多说，先看效果图：

1、首先说下要实现该效果需要添加的css样式及所需的js文件，具体下载地址就不粘贴了(因为太懒)

 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link rel="stylesheet" href="css/bootstrap-table.min.css">
 <script src="js/jquery-2.1.4.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/bootstrap-table.min.js"></script>
 <script src="js/bootstrap-table-zh-CN.js"></script>

2、html页面中需要准备的元素如下：

 <div class="container">
     <!--存放工具栏-->
     <div id="toolbar"></div>
     <!--存放生成的表格-->
     <table id="searchResults" class="table table-hover">
     </table>
 </div>

3、万事俱备只欠东风，东风就是数据问题，这里有一点需要注明，客户端（client）的数据和服务端（server）的数据格式略有差异，这里展示出来以供参考（本人使用的是客户端的数据)。

客户端数据格式（clientJson.json）：

[
    {
        "id": 0,
        "name": "李雷",
        "sex": "男",
        "age": "12",
        "cls": "一年级",
        "score": "81",
        "action": "操作"
    },
    {
        "id": 1,
        "name": "韩梅梅",
        "sex": "女",
        "age": "11",
        "cls": "一年级",
        "score": "90",
        "action": "操作"
    }
]

服务端数据格式（serverJson.json）:

{
  "total": 2,
  "rows": [
    {
      "id": 0,
      "name": "李雷",
      "sex": "男",
      "age": "12",
      "cls": "一年级",
      "score": "81"
    },
    {
      "id": 1,
      "name": "韩梅梅",
      "sex": "女",
      "age": "11",
      "cls": "一年级",
      "score": "90"
    }
  ]
}

4、所有的css、js、页面元素及数据都已经准备完毕，那么该如何生成表格呢？请看下面代码及注释，部分模块的显示效果已经在文章开头的图片中显示出来，请看官对号入座。

function createTab() {
        $('#searchResults').bootstrapTable('destroy').bootstrapTable({
            url: 'json/clientJson.json',
            /*data : data,*/

            toolbar: '#toolbar',                //工具按钮用哪个容器
            method: 'get',                      //请求方式
            striped: true,                      //是否显示行间隔色
//            cache: false,                       //是否使用缓存
            toolbarAlign: "right", //工具栏对齐方式
            sidePagination: "client", //分页方式：client客户端分页，server服务端分页
            search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            uniqueId: "id",
            pageNumber: 1,                       //初始化加载第一页
            pageSize: 1,                       //每页的记录行数
            pageList: [1, 2, 3], //可供选择的每页的行数
            pagination: true, // 是否分页
            sortable: true, // 是否启用排序
            sortOrder: "asc",                   //排序方式
            showColumns: true, //是否显示列选择按钮
            showRefresh: true,                  //是否显示刷新按钮
            clickToSelect: true,                //是否启用点击选中行
//            height: 500,                        //行高
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            queryParamsType: '',//设置请求参数格式
            queryParams: function queryParams(params) { //设自定义查询参数
                /*请求远程数据时，您可以通过修改queryParams来发送其他参数。
                如果queryParamsType = 'limit'，params对象包含：limit，offset，search，sort，order。
                否则，它包含：pageSize，pageNumber，searchText，sortName，sortOrder。
                返回false停止请求。
                默认： function(params) { return params }*/
                return params;
            },
            columns: [
                {
                    title: "全选",
                    field: "select",
                    checkbox: true,
                    width: 20, //宽度
                    align: "center", //水平
                    valign: "middle" //垂直
                },
                {
                    field: 'no',
                    title: '序号',
                    align: "center",
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }
                ,
                {
                    field: 'name',
                    title: '名字',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'sex',
                    title: '性别',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'age',
                    title: '年龄',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'cls',
                    title: '年级',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'score',
                    title: '分数',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'id',
                    title: '操作',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }
            ]
        });

    }

    //操作栏的格式化
    function actionFormatter(value, row, index) {
        var id = row.id;
        var result = "";
        result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
        return result;
    }

4、ok，现在表格已经展示出来了，过程很简单，但是我刚开始做的时候碰见一个问题： Syntax error, unrecognized expression，如下图所示。wfk？捣鼓半天终于发现，是jquery的版本问题，1.9的版本显然不好使，于是换成2.1的版本，终于大功告成。

5、最后，双手送上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格及下载</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <!--<script src="js/jquery-2.1.4.min.js"></script>-->
      <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="container text-center">
    <button name='createTab' id='creatTab' type="button"
            class="btn btn-primary" onclick="createTab()">生成表格
    </button>
</div>
<div class="container">
    <!--存放工具栏-->
    <div id="toolbar"></div>
    <!--存放生成的表格-->
    <table id="searchResults" class="table table-hover">
    </table>
</div>
</body>
<script>
    function createTab() {
        $('#searchResults').bootstrapTable('destroy').bootstrapTable({
            url: 'json/clientJson.json',
            /*data : data,*/

            toolbar: '#toolbar',                //工具按钮用哪个容器
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
//            cache: false,                       //是否使用缓存
            toolbarAlign: "right", //工具栏对齐方式
            sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
            search: true,//是否显示表格搜索，此搜索是客户端搜索，不会进服务端
            uniqueId: "id",
            pageNumber: 1,                       //初始化加载第一页
            pageSize: 1,                       //每页的记录行数
            pageList: [1, 2, 3], //可供选择的每页的行数
            pagination: true, // 是否分页
            sortable: true, // 是否启用排序
            sortOrder: "asc",                   //排序方式
            showColumns: true, //是否显示列选择按钮
            showRefresh: true,                  //是否显示刷新按钮
            clickToSelect: true,                //是否启用点击选中行
//            height: 500,                        //行高
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            queryParamsType: '',//设置请求参数格式
            queryParams: function queryParams(params) { //设自定义查询参数
                /*请求远程数据时，您可以通过修改queryParams来发送其他参数。
                如果queryParamsType = 'limit'，params对象包含：limit，offset，search，sort，order。
                否则，它包含：pageSize，pageNumber，searchText，sortName，sortOrder。
                返回false停止请求。
                默认： function(params) { return params }*/
                return params;
            },
            columns: [
                {
                    title: "全选",
                    field: "select",
                    checkbox: true,
                    width: 20, //宽度
                    align: "center", //水平
                    valign: "middle" //垂直
                },
                {
                    field: 'no',
                    title: '序号',
                    align: "center",
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }
                ,
                {
                    field: 'name',
                    title: '名字',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'sex',
                    title: '性别',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'age',
                    title: '年龄',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'cls',
                    title: '年级',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'score',
                    title: '分数',
                    align: 'center',
                    valign: 'middle',
                },
                {
                    field: 'id',
                    title: '操作',
                    width: 120,
                    align: 'center',
                    valign: 'middle',
                    formatter: actionFormatter
                }
            ]
        });

    }

    //操作栏的格式化
    function actionFormatter(value, row, index) {
        var id = row.id;
        var result = "";
        result += "<button style='cursor: pointer' class='btn btn-primary' title='修改' onclick=''>修改</button>";
        return result;
    }
</script>
</html>

-------------------------------------------------------------------------------------------------

QQ群：871934478

-------------------------------------------------------------------------------------------------

bootstraptable

bootstraptable详细使用指南1、bootstrap-table简介1.1、bootstraptable简介及特征： Bootstraptable是国人开发的一款基于Bootstrap的jQuery表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑... 查看详情

highcharts使用时遇到的问题及解决方案

Highcharts使用时遇到的问题及解决方案Highcharts图表控件功能强大，对细节处理得很细致，是目前使用最为广泛的图表控件。本文总结了作者在使用Highcharts时遇到的问题及解决方案。1. 图表颜色设置图表的边框色，背景色及点... 查看详情

thrift的使用及遇到的问题

centos系统安装官方文档：http://thrift.apache.org/docs/install/centos一、按该文档安装出现了一系列的问题，记录如下：1.安装thrift时./bootstrap.sh出错，然后安装libevent问题解决（首先：gitgc，清除./configure和make错误的信息）#wgethttp://www.monk... 查看详情

htmlmap实际使用中遇到的问题及解决方案

...用的，这明显就是照搬文档自己再改一下嘛，难道你们在使用中没遇到什么特别的需求或者什么问题？怎么不写出来？所以我就不介绍map了，直接说遇到的问题。问题一：如果图片原始尺寸是900px，但是你展示的尺寸是450px,那map... 查看详情

使用composer遇到的问题及解决方法

　　可以尝试利用composer下载Yii框架，编辑composer.json文件：{"require":{"yiisoft/yii2":"~2.0.0"}} 　　然后在这个包含composer.json文件的目录下执行命令：composerinstall　　然后就等待下载完成问题零：Yourrequirementscouldnotberesolvedtoanin... 查看详情

vue使用技巧，及遇到的问题

这里给大家分享一下vue中的一些技巧，希望对大家有用处。（话不多说上代码）1，vue路由拦截浏览器后退实现表单保存类似需求（为了防止用户突然离开，没有保存已输入的信息。）//在路由组件中：mounted(){},beforeRouteLeave(to,from... 查看详情

bootstraptable表头多一行

百度了半天没有人遇到过这个问题好像，但是奇葩的事情让我碰到了如图：解决办法：我采用的JS加载的方式，把height参数注释掉就解决了。原因我也没仔细研究哈哈。。。。查看详情

使用gomonkeymock函数及方法时遇到panic:permissiondenied的问题及解决方法(代码片段)

文章目录问题描述解决方法问题描述基于Golang语言，使用gomonkey来mock函数及方法，在Mac环境执行的时候，遇到如下错误：panic:permissiondenied[recovered]panic:permissiondenied显然，执行单测的时候，遇到了权限问题... 查看详情

bootstraptable前端分页的问题

之前一直都是使用bootstraptable的后端分页，后来有一次不是服务器端分页写的，又比较懒，不想改后端接口太多。考虑到数据量不算多，顶多一千条数据，就改成前端分页，后端可以不用改什么，就配合改一下数据格式。设置参... 查看详情

pyspark使用过程中遇到的典型问题及处理办法

PySpark使用过程中遇到的典型问题及处理办法前言不知道为啥,现在写博客总得弄点前言,观者无不叹息为何生命中宝贵的20秒钟要浪费在这无意义的前言上????????????好吧,就是想水点文字,今天是7月的最后一天,距离零点还有1个小时... 查看详情

$(...).bootstrapTable 不是函数，即使它是在正文结束之前声明的

】$(...).bootstrapTable不是函数，即使它是在正文结束之前声明的【英文标题】：$(...).bootstrapTableisnotafunctionevenifitisdeclaredbeforetheendofthebody【发布时间】：2018-08-1613:06:33【问题描述】：需要帮助来解决这个问题。我遇到了错误$(...).boo... 查看详情

使用 BootstrapTable 添加行时使用 CellStyle

】使用BootstrapTable添加行时使用CellStyle【英文标题】：UsingCellStylewhenaddingrowswithBootstrapTable【发布时间】：2018-06-2005:19:54【问题描述】：我有一个带有按钮的引导表，用于添加新的数据行。我想在插入时为每个新行的某一列（text2... 查看详情

使用tensorflow及anaconda(spyder)时遇到的问题(代码片段)

（1）问题一：如何在tensorflow环境下使用spyder答：在anacondanavigator中environment中搜索tensorflow，安装适合tensorflow的spyder（2）问题二：在在tensorflow环境下使用spyder时有些库文件（比如matplotlib）显示nomodule，如何解决答：anaconda下已经... 查看详情

flutter单线程异步及isolate使用过程遇到的问题(代码片段)

遇到两个问题:官方子isolate内不能使用插件.解决方案:使用isolate_handler/flutter_isolate代替官方isolate参考链接子isolate处理完耗时操作,传递结果给主isolate的方法:voidsend(Object?message);耗时严重,达秒级,顿了一下,页面才刷新的感觉(未解决... 查看详情

flutter单线程异步及isolate使用过程遇到的问题(代码片段)

bootstraptable翻页（后端分页）数据对不上的问题

参考技术AbootstrapTable后端分页后前端翻页事件造成的显示数据偶尔不对程序逻辑是这样的：bootstrapTable列中有这样一列，实现自动排序分页函数及方法：后台对数据进行了筛选排序和跳页，翻页的时候，经常会出现展示初始数据... 查看详情

element-ui使用及遇到的问题

参考技术A原因：Popover默认是插入到body元素上的，此时得修改成插入到父级元素中当插入到父元素后悔发现原本的弹框边界悔自动变换位置的特性失效了解决办法：设置popper-options中的boundariesElement为边界判定的HTMLElement元素解决... 查看详情

gitlab搭建安装及使用中遇到的问题。

一、CentOS7安装gitlab-ce1.下载及安装rpm软件包。下载RPM包curl-LJOhttps://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-8.9.8-ce.0.el7.x86_64.rpm安装RPM包rpm-igitlab-ce-8.9.8-ce.0.el7.x86_64.rpm2.修改Gitlab配置文件。v 查看详情