bootstrp-table学习,具体内容如下

$table.bootstrapTable({

url: '../data/data1.json',

striped: true,

minimumCountColumns: 2,

clickToSelect: true,

detailView: true,

detailFormatter: 'detailFormatter',

pagination: true,

paginationLoop: false,

classes: 'table table-hover table-no-bordered',

sidePagination: 'server',

silentSort: false,

queryParamsType:'',

queryParams: queryParams : function(params) {

var subcompany = $('#subcompany option:selected').val();

var name = $('#name').val();

return {

pageNumber: params.offset+1,

pageSize: params.limit,

companyId:subcompany,

name:name

};

},

smartDisplay: false,

idField: 'id',

sortable: false,

escape: true,

idField: 'systemId',

maintainSelected: true,

toolbar: '#toolbar',

columns: [

{field: 'state', checkbox: true},

{field: 'id', title: '编号', sortable: true, halign: 'center'},

{field: 'username', title: '账号', sortable: true, halign: 'center'},

{field: 'password', title: '密码', sortable: true, halign: 'center'},

{field: 'name', title: '姓名', sortable: true, halign: 'center'},

{field: 'sex', title: '性别', sortable: true, halign: 'center'},

{field: 'age', title: '年龄', sortable: true, halign: 'center'},

{field: 'phone', title: '手机', sortable: true, halign: 'center'},

{field: 'email', title: '邮箱', sortable: true, halign: 'center'},

{field: 'address', title: '地址', sortable: true, halign: 'center'},

{field: 'remark', title: '备注', sortable: true, halign: 'center'},

{field: 'action', title: '操作', halign: 'center', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}

]

}).on('all.bs.table', function (e, name, args) {

$('[data-toggle="tooltip"]').tooltip();

$('[data-toggle="popover"]').popover();

});

bootstrap-table是一种表格插件,可用作后管系统的数据处理和回显,当然,bootstrap-table的使用需要前后台协调进行。

在使用bootstrap-table过程中需要注意:

接口返回数据格式[json]包含的两个字段: total(数据总计)与rows(数据),即{"total":24,"rows":[...]}

分页包括服务器端和客户端两种情况,务器端分页的参数默认值为limit,offset,search,sort,order Else,通过queryParamsType参数可对其进行重写

columns字段中:file 表示返回字段的属性名;title表示th标题内容;formatter表示自定义列表显示内容,包含三个参数,value, row, index,对应 为file值,行数据,行数

function actionFormatter(value, row, index) {

return [

' ',

' ',

].join('');

}

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

bootstrap表格插件php,bootstrap table表格插件使用详解相关推荐

  1. NPOI导出word,NPOI导出word表格,NPOI复制table表格 XWPFDocument中XWPFTable

    NPOI导出word,NPOI导出word表格,NPOI复制table表格 XWPFDocument中XWPFTable 使用NPOI可以对Word中的文本做替换,当遇到表格时,单个表格也可以循环遍历 ...

  2. html栅格系统格式,Bootstrap的栅格系统是什么?栅格系统详解

    本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...

  3. Hive Create Table和Load DATA详解

    Hive Create Table和Load DATA详解 一.Hive Create Table详细讲解 二.LOAD DATA 测试使用 三.内部表和外部表区别 Hive在使用创建表的时候,有有一 ...

  4. HTML表格竖边框线,Table表格横竖线实现Css

    .tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:solid #999 ...

  5. element-ui实现table表格的嵌套(table表格嵌套)功能实现

    最近在做电商类型的官网,希望实现的布局如下:有表头和表身,所以我首先想到的就是table表格组件. 表格组件中常见的就是:标题和内容一一对应: 像效果图中的效果,只用基础的表格布局是不行的,因此我想到 ...

  6. Maven基础-Maven的生命周期、命令和插件(6)- mvn test命令详解

    1.项目背景 本文在 <Maven基础-Maven的生命周期.命令和插件(2)- 项目准备> 一文的基础上进行命令的演示. 如何各位coder只是单纯的想了解 mvn test 命令,则可 ...

  7. html表格分页样式,jQuery table分页插件

    插件描述:一款简单快速的前后端分页双套代码 更新时间:2018/1/10 下午5:49:58 更新说明:修改双击效果失败的bug 更新时间:2018/1/3 下午5:20:02 更新说明:$(e.$e ...

  8. html表格列拖拽,table表格列顺序拖拽和列宽度拖拽

    目前项目要求对表格可进行宽度拖拽和排序拖拽.用的第三方库库ant-desigin-vue. 对于列宽度拖拽 在ant-desigin-vue的table示例中有对应的案例,但是直接复制代码,会报错.最 ...

  9. html表格边框默认值,table表格边框的设置

    border-collapse 属性设置table的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示. border-collapse值 separate: 默认值.边框会被分 ...

  10. CVE-2021-2429:MySQL InnoDB Memcached 插件中的堆缓冲区溢出漏洞详解

     聚焦源代码安全,网罗国内外最新资讯! 编译:代码卫士 2021年4月,ZDI 收到了一名匿名者提供的关于MySQL 数据库中某漏洞的报告,结果是位于 InnoDB memcached 插件中的基于堆 ...

最新文章

  1. java学习之匿名内部类与包装类
  2. ROS Learning-032 (提高篇-010 Launch)Launch 深入研究 --- (启动文件编程)ROS 的 XML语法简介...
  3. linux下编译动态和静态链接库
  4. 关于要不要买apple watch 的思考:节俭是一种习惯
  5. Mysql常用的命令
  6. 达梦数据迁移工具的使用
  7. c语言判断出多位各位数
  8. Linux的ping用python,python与linux中的非特权ping IPPROTO_ICMP
  9. linux在当前目录下打开终端,linux - 终端:在窗口中打开当前路径? - Ubuntu问答...
  10. 15个Rhino Grasshopper技巧【最新】
  11. 计算机网络信息安全保密制度,档案馆计算机网络系统和信息安全保密制度
  12. LM317,LM337正负电源 电路图PCB设计
  13. 1156: 单数变复数
  14. STM32---ADC模数转换详解
  15. 自建邮件服务器无法发附件,搭建好服务器后不能够发邮件也不能收邮件
  16. 我生命的意义和价值是什么
  17. Linux主分区文件系统,Linux_Linux磁盘和文件系统管理,1、 分区MBR(Master Boot Recor - phpStudy...
  18. [DeeplearningAI笔记]序列模型3.3-3.5集束搜索
  19. 安装pytorch报错torch.cuda.is_available()=false的解决方法
  20. NFTFi赛道版图概览

热门文章

  1. kafka集成后台代码整理(支持kafka集群)
  2. 网络攻防闯关练习-www.hackthissite.org
  3. 反光板导航SLAM(四)如何通过两个反光柱估计位姿
  4. Polyspace代码静态检查及生成报告
  5. 全球及中国牙科蜡分离剂行业研究及十四五规划分析报告
  6. gae怎么打开谷歌学术?_了解Google App Engine(GAE)Java API第2部分:设置和简介
  7. Ai数据大汇总—在这里没有找不到的数据
  8. nvidia jeston 设备树使能SPI
  9. html树形菜单可选择,jquery树形选择器
  10. 都在建设数据能力,爱数为什么强调全域?