本文实例为大家分享了bootstrap Table的操作代码，供大家参考，具体内容如下

function HQCreatTable(ob) { var option = { cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） scrollX: true, scrollY:true, striped: true, //使表格带有条纹 //是否显示行间隔色 sidePagination: "client",//分页方式：client客户端分页，server服务端分页（*） pagination: true, //在表格底部显示分页工具栏 pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 10, pageList: [ 10,15],//可供选择的每页的行数（*） showColumns: false,//是否显示所有的列 sortable: true, //是否启用排序 clickToSelect: true,//是否启用点击选中行 showRefresh: false, //显示刷新按钮 //search: false,//是否显示右上角的搜索框 //toolbar: '#toolbar', //工具按钮用哪个容器 uniqueId: "ID", //每一行的唯一标识，一般为主键列 undefinedText: "", toolbarAlign: 'left', exportDataType: "all", //basic', 'all', 'selected'. } if (ob.rowStyle) { option.rowStyle = ob.rowStyle;//行样式 是函数 } //排序 if (ob.sortOrder) { option.sortOrder = ob.sortOrder; } else { option.sortOrder = "desc"; } if (ob.sortName) { option.sortName = ob.sortName; } if (ob.showExport) { option.showExport = ob.showExport;//导出Excel } if (ob.showFooter) { option.showFooter = ob.showFooter;//是否显示统计页脚 } if (ob.searchAlign) { option.searchAlign = ob.searchAlign; } if (ob.num) { option.pageSize = ob.num;//每页的记录行数（*） } if (ob.data) { option.data = ob.data; } else { option.data = []; } if (ob.search) { option.search = ob.search; } if (ob.columns) { option.columns = ob.columns; } if (ob.onClickRow) { option.onClickRow = ob.onClickRow; } if (ob.onDblClickRow) { option.onDblClickRow = ob.onDblClickRow; } if (ob.onDblClickRow) { option.onDblClickRow = ob.onDblClickRow; } if (ob.onCheck) { option.onCheck = ob.onCheck; } if (ob.onAll) { option.onAll = ob.onAll; } if (ob.onLoadSuccess) { option.onLoadSuccess = ob.onLoadSuccess; } if (ob.toolbar) { option.toolbar = ob.toolbar; } if (ob.singleSelect || ob.singleSelect == false) { option.singleSelect = ob.singleSelect } else { option.singleSelect = true;//禁止多选 } if (ob.maintainSelected) { option.maintainSelected = ob.maintainSelected; } else { option.maintainSelected = false;//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项 } if (ob.detailView) { option.detailView = ob.detailView; } if (ob.onExpandRow) { option.onExpandRow = ob.onExpandRow; } if (ob.onEditableSave) { option.onEditableSave = ob.onEditableSave; } $(ob.id).bootstrapTable('destroy'); $(ob.id).bootstrapTable(option); if (ob.data) { $(ob.id).bootstrapTable('load', ob.data); }}

前端分页的Table配置函数

<table id="Table3" data-row-style="rowStyle"></table> //行根据数据变色 function rowStyle(row, index) { var classes = ['success']; var classes1 = ['danger']; var classes2 = ['warning']; if (row.bed_msg==0) { return { classes: classes2 }; }else{ if (row.status == 1) { return { classes: classes1 }; } else { return { classes: classes }; } } }

根据每行数据的一个字段的值来改变行的背景色（class好像只能调用他本来默认的那几个，很久之前写的忘记了是不是这样的）

formatter: function (value, row, index) { // 根据row.列名 那状态确定返回 true/false if (row.status == 1) { return { disabled: true }; } }

这个是根据每行数据的一个字段的值来是否禁用选择框（我在之前项目需要做结算，已结算的和未结算的在一起，因此需要这个），formatter还可以写别的函数，比如根据1，0值改成其对应的值

footerFormatter: function (data) { return data.reduce(function (sum, row) { return accAdd(sum, row["Selmoney"]); }, 0) + "元"; }

footerFormatter是必须之前的配置Table时，showFooter属性为true，否则不会显示。我写这个是前端分页的话是Table所有数据的Selmoney值的总和，后端分页的话则是当页数据的总和。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。