2023年6月21日发(作者：)

前端表格插件BootstrapTable⼊门教程官⽹地址：Github地址：官⽹介绍：

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强⼤的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。主要功能⽀持 Bootstrap 3 和 Bootstrap 2⾃适应界⾯固定表头⾮常丰富的配置参数直接通过标签使⽤显⽰/隐藏列显⽰/隐藏表头通过 AJAX 获取 JSON 格式的数据⽀持排序格式化表格⽀持单选或者多选强⼤的分页功能⽀持卡⽚视图⽀持多语⾔⽀持插件优点学习成本较低，配置简单，⽂档齐全跟Bootstrap⽆缝衔接，整体风格⼀致，也便于⼆次开发开发者活跃，Github定期维护开始使⽤1、在⽹页的head标签⾥插⼊下⾯的代码2、在页⾯body代码块⾥定义表格展⽰的区域

3、使⽤data属性来渲染表格 （简单⽅式）
序号 名称 价格
4、编写JavaScript代码渲染表格 （推荐使⽤这种⽅式，代码阅读和扩展更为⽅便）在⽹页代码最下⾯插⼊js脚本，内容如下：$("#table").bootstrapTable({ // 对应table标签的id url: "<%=textPath()%>/api/", // 获取表格数据的url cache: false, // 设置为 false 禁⽤ AJAX 数据缓存， 默认为true striped: true, //表格显⽰条纹，默认为false pagination: true, // 在表格底部显⽰分页组件，默认false pageList: [10, 20], // 设置页⾯可以显⽰的数据条数 pageSize: 10, // 页⾯数据条数 pageNumber: 1, // ⾸页页码 sidePagination: 'server', // 设置为服务器端分页 queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这⾥添加额外的查询参数，返回false则终⽌请求 return { pageSize: , // 每页要显⽰的数据条数 offset: , // 每页显⽰数据的开始⾏号 sort: , // 要排序的字段 sortOrder: , // 排序规则 dataId: $("#dataId").val() // 额外添加的参数 } }, sortName: 'id', // 要排序的字段 sortOrder: 'desc', // 排序规则 columns: [ { checkbox: true, // 显⽰⼀个勾选框 align: 'center' // 居中显⽰ }, { field: 'code', // 返回json数据中的name title: '编号', // 表格表头显⽰⽂字 align: 'center', // 左右居中 valign: 'middle' // 上下居中 }, { field: 'name', title: '名称', align: 'center', valign: 'middle' }, { field: 'calcMode', title: '计算⽅式', align: 'center', valign: 'middle', formatter: function (value, row, index){ // 单元格格式化函数 formatter: function (value, row, index){ // 单元格格式化函数 var text = '-'; if (value == 1) { text = "⽅式⼀"; } else if (value == 2) { text = "⽅式⼆"; } else if (value == 3) { text = "⽅式三"; } else if (value == 4) { text = "⽅式四"; } return text; } }, { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度，单位为像素px formatter: function (value, row, index) { return ''; } } ], onLoadSuccess: function(){ //加载成功时执⾏ ("加载成功"); }, onLoadError: function(){ //加载失败时执⾏ ("加载数据失败"); }})组件⽂档⼀、表格参数使⽤⽅式如下：$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", ... ...});

名称methodurl标签data-methoddata-urldata-undefined-textdata-striped--data-cachedata-data-type类型StringString默认‘get’undefined描述服务器数据的请求⽅式 ‘get’ or ‘post’服务器数据的加载地址undefinedTextString‘-‘当数据为 undefined 时显⽰的字符stripedcolumnsdatacachedataTypeBooleanArrayArrayBooleanStringfalse[][]true‘json’设置为 true 会有隔⾏变⾊效果列配置项,详情请查看 列参数 表格.加载json格式的数据设置为 false 禁⽤ AJAX 数据缓存服务器返回的数据类型请求服务器数据时，你可以通过重写参数的⽅式添加⼀些额外的参数，名称queryParams标签data-query-params类型Function默认function(params){

return params;

}例如 toolbar 中的参数

描述如果 queryParamsType = ‘limit’ ,返回参数必须包含

limit, offset, search, sort, order

否则, 需要包含: pageSize, pageNumber, searchText, sortName,sortOrder.

返回false将会终⽌请求paginationdata-paginationdata-pagination-loopdata-side-paginationdata-page-numberdata-page-sizeBooleanfalse设置为 true 会在表格底部显⽰分页条paginationLoopBooleantrue设置为 true 启⽤分页条⽆限循环的功能。sidePaginationString‘client’设置在哪⾥进⾏分页，可选值为 ‘client’ 或者 ‘server’。设置‘server’时，必须设置 服务器数据地址（url）或者重写ajax⽅法pageNumberNumber1如果设置了分页，⾸页页码pageSizeNumber10[10, 25, 50, 100,All]false如果设置了分页，页⾯数据条数如果设置了分页，设置可供选择的页⾯数据条数。设置为All 则显⽰所有记录。是否启⽤搜索框pageListdata-page-listArraysearchdata-searchdata-search-on-enter-keydata-show-refreshdata-click-to-selectdata-single-selectBooleansearchOnEnterKeyBooleanfalse设置为 true时，按回车触发搜索⽅法，否则⾃动触发搜索⽅法showRefreshBooleanfalse是否显⽰ 刷新按钮clickToSelectBooleanfalse设置true 将在点击⾏时，⾃动选择rediobox 和 checkboxsingleSelectBooleanfalse设置True 将禁⽌多选⼆、列参数针对具体每⼀列展⽰的设置参数，最常⽤的为 title 和 field， 它们分别设置了表头显⽰⽂字和对应要显⽰的每项数据⽰例代码：$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", columns: [ { checkbox: true }, { title: '标准编号' field: 'stdCode' }, ... ... ]});

名称titlefield标签data-titledata-fielddata-checkbox类型StringString默认undefinedundefined描述表头要显⽰的⽂本要显⽰数据的字段名称，可以理解为json对象⾥的keycheckboxBooleanfalse设置为True的时候 则显⽰⼀列checkbox组件，该列的宽度为固定宽度名称radiodata-标签radiodata-aligndata-valign类型Boolean默认false描述设置为True的时候 则显⽰⼀列radio组件，该列的宽度为固定宽度alignStringundefined设置单元格数据的左右对齐⽅式， 可选择的值有：’left’, ‘right’, ‘center’valignStringundefined设置单元格数据的上下对齐⽅式， 可选择的值有：’top’, ‘middle’, ‘bottom’widthdata-widthNumber{Pixels orPercentage}undefined设置列的宽度。如果没有设置的话则根据表格内容⾃适应宽度。设置的话，可以使⽤’%’百分⽐的⽅式，也可以设置要显⽰的像素值， 如果设置像素值的话可以不填’px’， 例如： width :100 和 width : ‘100px’ ，效果是⼀样的visibledata-visibleBooleantrue显⽰或隐藏该列， 默认显⽰， False为隐藏单元格格式化函数，有三个参数：value： 该列的字段值；formatterdata-formatterFunctionundefinedrow： 这⼀⾏的数据对象；index： ⾏号，第⼏⾏，从0开始计算例⼦：formatter : function(value, row, index){ return value + + index; }三、事件给表格绑定事件，代码：$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", onLoadSuccess: function(){ //加载成功时执⾏ ("加载成功"); }, onLoadError: function(){ //加载失败时执⾏ ("加载数据失败"); }});

Option 事件onLoadSuccessonLoadErrorjQuery 事件参数datastatusrow, element：tr 元素，

field：点击列的 field 名称。描述请求加载远程服务器数据成功时的事件请求加载远程服务器数据失败时的事件当⽤户双击某⼀⾏的时候触发，参数包括：ow, $elementrow：点击⾏的数据，field：点击列的 field 名称。ield, value, row, element：td 元素。field, value, row, element：td 元素。四、⽅法使⽤⽅法的语法：$(‘#table’).bootstrapTable(‘method’, parameter);。

⽰例代码：// 获取表格所有已经勾选的⾏数据，为⼀个对象数组var selects = $('#table').bootstrapTable('getSelections');名称(method)参数描述getOptions名称(method)getSelectionsgetAllSelectionsloadappendprependnone参数nonenonedatadatadata返回表格的 Options。描述返回所选的⾏，当没有选择任何⾏的时候返回⼀个空数组。返回所有选择的⾏，包括搜索过滤前的，当没有选择任何⾏的时候返回⼀个空数组。加载数据到表格中，旧数据会被替换。添加数据到表格在现有数据之后。插⼊数据到表格在现有数据之前。插⼊新⾏，参数包括：insertRowparamsindex: 要插⼊的⾏的 index。row: ⾏的数据，Object 对象。更新远程服务器上的数据，可以设置{silent: true}来默认刷新，也可以设置{url: newUrl}来改变获取数据的url接⼝，也⽀持设置请求的参数{query: {foo: ‘bar’}}，这点在表单查询时很有⽤显⽰数据加载状态隐藏数据加载状态选择⼀⾏，参数为⾏号，index从0开始取消选择⼀⾏，参数为⾏号，index从0开始销毁⼀个表格，直接把整个table删掉，需要重新开始渲染table跳到指定的页。跳到上⼀页。跳到下⼀页。refreshparamsshowLoadinghideLoadingcheckuncheckdestroyselectPageprevPagenextPagenonenoneindexindexnonepagenonenone

2023年6月21日发(作者：)

前端表格插件BootstrapTable⼊门教程官⽹地址：Github地址：官⽹介绍：

基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强⼤的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。主要功能⽀持 Bootstrap 3 和 Bootstrap 2⾃适应界⾯固定表头⾮常丰富的配置参数直接通过标签使⽤显⽰/隐藏列显⽰/隐藏表头通过 AJAX 获取 JSON 格式的数据⽀持排序格式化表格⽀持单选或者多选强⼤的分页功能⽀持卡⽚视图⽀持多语⾔⽀持插件优点学习成本较低，配置简单，⽂档齐全跟Bootstrap⽆缝衔接，整体风格⼀致，也便于⼆次开发开发者活跃，Github定期维护开始使⽤1、在⽹页的head标签⾥插⼊下⾯的代码2、在页⾯body代码块⾥定义表格展⽰的区域

3、使⽤data属性来渲染表格 （简单⽅式）
序号 名称 价格
4、编写JavaScript代码渲染表格 （推荐使⽤这种⽅式，代码阅读和扩展更为⽅便）在⽹页代码最下⾯插⼊js脚本，内容如下：$("#table").bootstrapTable({ // 对应table标签的id url: "<%=textPath()%>/api/", // 获取表格数据的url cache: false, // 设置为 false 禁⽤ AJAX 数据缓存， 默认为true striped: true, //表格显⽰条纹，默认为false pagination: true, // 在表格底部显⽰分页组件，默认false pageList: [10, 20], // 设置页⾯可以显⽰的数据条数 pageSize: 10, // 页⾯数据条数 pageNumber: 1, // ⾸页页码 sidePagination: 'server', // 设置为服务器端分页 queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这⾥添加额外的查询参数，返回false则终⽌请求 return { pageSize: , // 每页要显⽰的数据条数 offset: , // 每页显⽰数据的开始⾏号 sort: , // 要排序的字段 sortOrder: , // 排序规则 dataId: $("#dataId").val() // 额外添加的参数 } }, sortName: 'id', // 要排序的字段 sortOrder: 'desc', // 排序规则 columns: [ { checkbox: true, // 显⽰⼀个勾选框 align: 'center' // 居中显⽰ }, { field: 'code', // 返回json数据中的name title: '编号', // 表格表头显⽰⽂字 align: 'center', // 左右居中 valign: 'middle' // 上下居中 }, { field: 'name', title: '名称', align: 'center', valign: 'middle' }, { field: 'calcMode', title: '计算⽅式', align: 'center', valign: 'middle', formatter: function (value, row, index){ // 单元格格式化函数 formatter: function (value, row, index){ // 单元格格式化函数 var text = '-'; if (value == 1) { text = "⽅式⼀"; } else if (value == 2) { text = "⽅式⼆"; } else if (value == 3) { text = "⽅式三"; } else if (value == 4) { text = "⽅式四"; } return text; } }, { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度，单位为像素px formatter: function (value, row, index) { return ''; } } ], onLoadSuccess: function(){ //加载成功时执⾏ ("加载成功"); }, onLoadError: function(){ //加载失败时执⾏ ("加载数据失败"); }})组件⽂档⼀、表格参数使⽤⽅式如下：$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", ... ...});

名称methodurl标签data-methoddata-urldata-undefined-textdata-striped--data-cachedata-data-type类型StringString默认‘get’undefined描述服务器数据的请求⽅式 ‘get’ or ‘post’服务器数据的加载地址undefinedTextString‘-‘当数据为 undefined 时显⽰的字符stripedcolumnsdatacachedataTypeBooleanArrayArrayBooleanStringfalse[][]true‘json’设置为 true 会有隔⾏变⾊效果列配置项,详情请查看 列参数 表格.加载json格式的数据设置为 false 禁⽤ AJAX 数据缓存服务器返回的数据类型请求服务器数据时，你可以通过重写参数的⽅式添加⼀些额外的参数，名称queryParams标签data-query-params类型Function默认function(params){

return params;

}例如 toolbar 中的参数

描述如果 queryParamsType = ‘limit’ ,返回参数必须包含

limit, offset, search, sort, order

否则, 需要包含: pageSize, pageNumber, searchText, sortName,sortOrder.

返回false将会终⽌请求paginationdata-paginationdata-pagination-loopdata-side-paginationdata-page-numberdata-page-sizeBooleanfalse设置为 true 会在表格底部显⽰分页条paginationLoopBooleantrue设置为 true 启⽤分页条⽆限循环的功能。sidePaginationString‘client’设置在哪⾥进⾏分页，可选值为 ‘client’ 或者 ‘server’。设置‘server’时，必须设置 服务器数据地址（url）或者重写ajax⽅法pageNumberNumber1如果设置了分页，⾸页页码pageSizeNumber10[10, 25, 50, 100,All]false如果设置了分页，页⾯数据条数如果设置了分页，设置可供选择的页⾯数据条数。设置为All 则显⽰所有记录。是否启⽤搜索框pageListdata-page-listArraysearchdata-searchdata-search-on-enter-keydata-show-refreshdata-click-to-selectdata-single-selectBooleansearchOnEnterKeyBooleanfalse设置为 true时，按回车触发搜索⽅法，否则⾃动触发搜索⽅法showRefreshBooleanfalse是否显⽰ 刷新按钮clickToSelectBooleanfalse设置true 将在点击⾏时，⾃动选择rediobox 和 checkboxsingleSelectBooleanfalse设置True 将禁⽌多选⼆、列参数针对具体每⼀列展⽰的设置参数，最常⽤的为 title 和 field， 它们分别设置了表头显⽰⽂字和对应要显⽰的每项数据⽰例代码：$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", columns: [ { checkbox: true }, { title: '标准编号' field: 'stdCode' }, ... ... ]});

名称titlefield标签data-titledata-fielddata-checkbox类型StringString默认undefinedundefined描述表头要显⽰的⽂本要显⽰数据的字段名称，可以理解为json对象⾥的keycheckboxBooleanfalse设置为True的时候 则显⽰⼀列checkbox组件，该列的宽度为固定宽度名称radiodata-标签radiodata-aligndata-valign类型Boolean默认false描述设置为True的时候 则显⽰⼀列radio组件，该列的宽度为固定宽度alignStringundefined设置单元格数据的左右对齐⽅式， 可选择的值有：’left’, ‘right’, ‘center’valignStringundefined设置单元格数据的上下对齐⽅式， 可选择的值有：’top’, ‘middle’, ‘bottom’widthdata-widthNumber{Pixels orPercentage}undefined设置列的宽度。如果没有设置的话则根据表格内容⾃适应宽度。设置的话，可以使⽤’%’百分⽐的⽅式，也可以设置要显⽰的像素值， 如果设置像素值的话可以不填’px’， 例如： width :100 和 width : ‘100px’ ，效果是⼀样的visibledata-visibleBooleantrue显⽰或隐藏该列， 默认显⽰， False为隐藏单元格格式化函数，有三个参数：value： 该列的字段值；formatterdata-formatterFunctionundefinedrow： 这⼀⾏的数据对象；index： ⾏号，第⼏⾏，从0开始计算例⼦：formatter : function(value, row, index){ return value + + index; }三、事件给表格绑定事件，代码：$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", onLoadSuccess: function(){ //加载成功时执⾏ ("加载成功"); }, onLoadError: function(){ //加载失败时执⾏ ("加载数据失败"); }});

Option 事件onLoadSuccessonLoadErrorjQuery 事件参数datastatusrow, element：tr 元素，

field：点击列的 field 名称。描述请求加载远程服务器数据成功时的事件请求加载远程服务器数据失败时的事件当⽤户双击某⼀⾏的时候触发，参数包括：ow, $elementrow：点击⾏的数据，field：点击列的 field 名称。ield, value, row, element：td 元素。field, value, row, element：td 元素。四、⽅法使⽤⽅法的语法：$(‘#table’).bootstrapTable(‘method’, parameter);。

⽰例代码：// 获取表格所有已经勾选的⾏数据，为⼀个对象数组var selects = $('#table').bootstrapTable('getSelections');名称(method)参数描述getOptions名称(method)getSelectionsgetAllSelectionsloadappendprependnone参数nonenonedatadatadata返回表格的 Options。描述返回所选的⾏，当没有选择任何⾏的时候返回⼀个空数组。返回所有选择的⾏，包括搜索过滤前的，当没有选择任何⾏的时候返回⼀个空数组。加载数据到表格中，旧数据会被替换。添加数据到表格在现有数据之后。插⼊数据到表格在现有数据之前。插⼊新⾏，参数包括：insertRowparamsindex: 要插⼊的⾏的 index。row: ⾏的数据，Object 对象。更新远程服务器上的数据，可以设置{silent: true}来默认刷新，也可以设置{url: newUrl}来改变获取数据的url接⼝，也⽀持设置请求的参数{query: {foo: ‘bar’}}，这点在表单查询时很有⽤显⽰数据加载状态隐藏数据加载状态选择⼀⾏，参数为⾏号，index从0开始取消选择⼀⾏，参数为⾏号，index从0开始销毁⼀个表格，直接把整个table删掉，需要重新开始渲染table跳到指定的页。跳到上⼀页。跳到下⼀页。refreshparamsshowLoadinghideLoadingcheckuncheckdestroyselectPageprevPagenextPagenonenoneindexindexnonepagenonenone