bootstrap table轻松实现数据表格

在使用bootstrap table时可能在很多时候回用的表格来显示数据，如果自己写那肯定没问题，但是数据展示出来就麻烦多了，然而bootstrap table 封装了一套完善的数据表格组件，把从后台请求的数据很容易就展示出来了，bootstrap table有两种实现方式，一种是通过table写定在html里面，另一种是通过js实现，js实现比较灵活，所以这里采用js方式，下面来看实现。

推荐教程： Bootstrap图文教程

客户端

必须先引入相应的css、js等文件

服务端： 只需在接到请求时返回json数组就行了，是json数组哦，不是单个对象，不然就数据展示不出来。

注意bootstrap table 可以前端分页也可以后端分页，这里我们使用的是后端分页，后端分页时需返回含有

total：总记录数 这个键值好像是固定的，我看文档没找到可以修改成别的

rows： 记录集合 键值可以修改 dataField 自己定义成自己想要的就好

但是这可能会有请求时数据赋值不了的情况，那时你就会干着急了，下面还可以使用如下方式进行数据渲染。这个效果和上面一个不一样，这里就不上图了。同样第一步要引入官网所要求的的css/js等文件。

会使用之后是不是觉得比自己写的table更好用多了，还不用写一大堆js和p等，还有更多功能可以去官网了解怎么使用。

以上就是bootstrap table轻松实现数据表格的详细内容，更多请关注其它相关文章！

遇到这种插件事件问题，去查下官方api文档，比什么都快

onPageChange    page-changebstable    number, size    当页面更改页码或页面大小时触发。

项目中使用BootStrap editTable 进行行内编辑，编辑后并不实时的修改某列的值，而是在所有需要修改的列修改后，点击后面的确认投资按钮，一次性保存所修改的列。

由于确认投资是页面第一次初始化后出现的，而这时需要修改的列是没有值的，对列进行编辑后，点击按钮是不能获取到编辑后的值。

经过学习Bootstrap editTable  和 bootstarp table的API,找到了解决方案。

方法/步骤

1

引入bootstarp edittable 的 js，css 文件：

<link href="${basePath}/STATIC/plugins/bootstrap3-editable/css/bootstrap-editablecss" rel="stylesheet">

<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-table-editablejs"></script>

<script src="${basePath}/STATIC/plugins/bootstrap3-editable/js/bootstrap-editablejs"></script>

注意：bootstrap-table-editablejs  不属于 bootstrap3-editable 里面，是第三方或个人扩展的，可以从网上下载。

2

特定的列进行行内编辑：

field: 'autualFinanceAmount',

title: '实际融资金额（万元）',

width: 160,

align: 'center',

formatter:function(value,row,index){

if(value == null || value == ''){

return "-";

}

return value;

},

editable: {

type: 'text',

title: '实际融资金额',

validate: function (v) {

if (!v) return '实际融资金额不能为空';

//正则校验输入格式：最多两位小数。

var patrn=/^([1-9]\d\\d{1,2}|0\\d[1-9]|[1-9]\d)$/;

if(!patrntest(v)){

return '输入格式：最多两位小数';

}

}

}

3

当某列编辑完成后，需要对当前列所在的行进行修改 *** 作：

$("#grid")bootstrapTable({

url:'',

……

…… //其他属性

columns:[{

field:'rowId',

title:'序号',

width:30,

align: 'center',

formatter:function(value,row,index){

rowrowId = index;

return index+1;

}

…… //其他列

}],

onEditableSave: function (field, row, oldValue, $el) {

$table = $('#grid')bootstrapTable({});

$tablebootstrapTable('updateRow', {index: rowrowId, row: row});

}

注意：黑色粗体字就是新增的代码，表示在列编辑完成后，对当前列所在的行进行修改。

index 表示该行所在的索引。由于onEditableSave函数的参数中没有index，只能自己特殊处理了。看到在columns属性中，有一个field:'rowId’就是自己处理的，rowId赋给row。

4

如果你的列中有

formatter:function(value,row,index){} 函数，

在onEditableSave 方法执行完成后，该函数会重新执行，这样就会把修改后的列的值重新拿到进行处理。

方法如下：

onDblClickRow:function(row,obj){var i=0;var allTableData = $("#table")bootstrapTable('getData');for(;i<allTableDatalength;i++){ if(allTableData[i]ID==rowID){ break;

}

}

$('#table')bootstrapTable("uncheckAll");

$('#table')bootstrapTable("check",i);

}

一、电脑常见问题

主板不启动，开机无显示，有显卡报警声。

故障原因：一般是显卡松动或显卡损坏。  

处理办法：打开机箱，把显卡重新插好即可。要检查AGP插槽内是否有小异物，否则会使显卡不能插接到位；对于使用语音报警的主板，应仔细辨别语音提示的内容，再根据内容解决相应故障。  

如果以上办法处理后还报警，就可能是显卡的芯片坏了，更换或修理显卡。如果开机后听到"嘀"的一声自检通过，显示器正常但就是没有图像，把该显卡插在其他主板上，使用正常，那就是显卡与主板不兼容，应该更换显卡。

$(document)ready(function(){

$('#skillContentTable')bootstrapTable({

url: querySkillUrl,

columns: [],

resizable: true,

pagination: true,

sidePagination: 'client',

pageNumber: 1,

pageSize: 10,

pageList: [10,20,50,'All'],

search: true,

showRefresh: true,

showToggle: true,

showColumns: true,

});

});

以上就是关于bootstrap table轻松实现数据表格全部的内容，包括:bootstrap table轻松实现数据表格、bootstrap table如何获取分页点击事件、bootstrap table 获取数据里面的id可以重新请求数据展等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！