搜索
首页web前端js教程详解BootStrap数据表格
详解BootStrap数据表格Sep 15, 2017 am 09:12 AM
bootstrap数据表格

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧

首先初始化页面


$(function(){
  $('#archives-table').bootstrapTable({
   url: "/coinSend/list",//数据源
   dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total
   search: true,//是否搜索
   cache: false,
   striped: true,
   pagination: true,//是否分页
   sortable: true,          //是否启用排序
   sortOrder: "asc",          //排序方式
   //pageNumber:1,
   pageSize: 10,//单页记录数
   pageList: [5, 10, 20, 50],//分页步进值
   sidePagination: "server",//服务端分页
   contentType: "application/json",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
   dataType: "json",//期待返回数据类型
   method: "post",//请求方式
   searchAlign: "left",//查询框对齐方式
   silent: true,
   queryParamsType: "limit",//查询参数组织方式
   queryParams: function getParams(params) {
     var param = {
      pageNum: params.pageNumber,
      pageSize: params.pageSize,
      realName : params.search
     };
     return param;
   },
   responseHandler: function(res) {
     return {
      "total": res.total,//总页数
      "rows": res.rows  //数据
     };
   },
   searchOnEnterKey: false,//回车搜索
   showRefresh: true,//刷新按钮
   showColumns: true,//列选择按钮
   buttonsAlign: "left",//按钮对齐方式
   toolbar: "#userToolbarsendCoin",//指定工具栏
   toolbarAlign: "right",//工具栏对齐方式
   columns: [
     /*{
      title: "全选",
      field: "select",
      checkbox: true,
      width: 20,//宽度
      align: "center",//水平
      valign: "middle"//垂直
     },*/
     {
      title: "ID",//标题
      field: "id",//键名
      sortable: true,//是否可排序
      order: "desc"//默认排序方式
     },
     {
      field: "userInfo.userName",
      title: "用户名",
      sortable: true,
      titleTooltip: "this is name"
     }/*,
     {
      field: "userInfo.id",
      title: "userInfo.id",
     }*/,
     {
      field: "userInfo.realName",
      title: "真实姓名",
      sortable: true,
     },
     {
      field: "userInfo.department",
      title: "所属部门",
      sortable: true,
     },{
      field: "coinName",
      title: "类型",
      sortable: true,
     },
     {
      field: "amount",
      title: "数量",
      sortable: true,
      sorter:numSort
     },
     {
      field: "validDateStart",
      title: "有效期起",
      sortable: true,
      //——修改——获取日期列的值进行转换
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d
      }
     },
     {
      field: "validDateEnd",
      title: "有效期止",
      sortable: true,
      //——修改——获取日期列的值进行转换
      formatter: function (value, row, index) {
        var time = new Date(value);
        var y = time.getFullYear();//年
        var m = time.getMonth() + 1;//月
        var d = time.getDate();//日
        return y+"-"+m+"-"+d}
     }
     ,
     {
      field: "userInfo.id",
      title: "操作列",
      formatter:function(value, row, rowIndex){
        var userId =row.userInfo.id;
        var amount =row.amount;
        var validDateStart =row.validDateStart;
        var validDateEnd =row.validDateEnd;
        var realName =row.userInfo.realName;
        console.log(userId);
        console.log(realName);
        console.log(amount);console.log(validDateStart);console.log(validDateEnd);
        if(userId!=null){
         return&#39;      &#39;+&#39;<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\&#39;&#39;+userId+&#39;\&#39;,\&#39;&#39;+realName+&#39;\&#39;,\&#39;&#39;+row.id+&#39;\&#39;);"> <i class="icon-edit icon-white"></i>分配</a>&#39; +&#39;      &#39;/*+
            &#39;<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\&#39;&#39;+userId+&#39;\&#39;,\&#39;&#39;+amount+&#39;\&#39;,\&#39;&#39;+realName+&#39;\&#39;,\&#39;&#39;+validDateEnd+&#39;\&#39;,\&#39;&#39;+row.id+&#39;\&#39;);"> <i class="icon-edit icon-white"></i>编辑</a>&#39;*/;
        }else{
         return &#39;<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\&#39;&#39;+userId+&#39;\&#39;);"> <i class="icon-edit icon-white"></i>分配</a>&#39;;
        }
     }
     }
   ],
   onClickRow: function(row, $element) {
     //$element是当前tr的jquery对象
     $element.css("background-color", "white");
     /*alert(row.id);
     id = row.id;*/
   },//单击row事件
   locale: "zh-CN",//中文支持,
   detailView: false, //是否显示详情折叠
   detailFormatter: function(index, row, element) {
   var html = &#39;&#39;;
   $.each(row, function(key, val){
     html += "<p>" + key + ":" + val + "</p>"
   });
   return html;
  }
})
  /*$(&#39;#archives-table&#39;).bootstrapTable(&#39;hideColumn&#39;, &#39;userInfo.id&#39;);*/
  /*$("#searchBtn").click(function() {
   var realName = $("#realName").val();
   $.ajax({
     type: "post",
     url: "/coinSend/list",
     data: {param : param},
     dataType:"json",
     success : function(json) {
      $("#archives-table").bootstrapTable(&#39;load&#39;, json);//主要是要这种写法
     }
   });
  });*/
})

请求后台controller,动态获取数据

表格可以加一个手风琴样式


<p class="ibox float-e-margins">
  <p class="ibox-title">
   <h5>员工列表</h5>
   <p class="ibox-tools">
     <a class="collapse-link">
      <i class="fa fa-chevron-up"></i>
     </a>
   </p>
  </p>
  <p class="ibox-content">
   <p class="ibox float-e-margins">
     <table id="archives-table" class="table table-hover">
     </table>
   </p>
  </p>
</p>

以上是详解BootStrap数据表格的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
10款好看又实用的Bootstrap后台管理系统模板(快来下载)10款好看又实用的Bootstrap后台管理系统模板(快来下载)Aug 06, 2021 pm 01:55 PM

一个好的网站,不能只看外表,网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板,可以帮助大家快速建立强大有美观的网站后台,欢迎下载使用!如果想要获取更多后端模板,请关注php中文网后端模板栏目!

bootstrap与jquery是什么关系bootstrap与jquery是什么关系Aug 01, 2022 pm 06:02 PM

bootstrap与jquery的关系是:bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站,jquery是一个兼容多浏览器的javascript库,bootstrap是基于HTML、CSS、JAVASCRIPT的。

7款实用响应式Bootstrap电商源码模板(快来下载)7款实用响应式Bootstrap电商源码模板(快来下载)Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码​栏目!

8款Bootstrap企业公司网站模板(源码免费下载)8款Bootstrap企业公司网站模板(源码免费下载)Aug 24, 2021 pm 04:35 PM

好看又实用的企业公司网站模板可以提高您的建站效率,下面PHP中文网为大家分享8款Bootstrap企业公司网站模板,均可免费下载,欢迎大家使用!更多企业站源码模板,请关注php中文网企业站源码栏目!

bootstrap中sm是什么意思bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM

在bootstrap中,sm是“小”的意思,是small的缩写;sm常用于表示栅格类“.col-sm-*”,是小屏幕设备类的意思,表示显示大小大于等于768px并且小于992px的屏幕设备,类似平板设备。

bootstrap默认字体大小是多少bootstrap默认字体大小是多少Aug 22, 2022 pm 04:34 PM

bootstrap默认字体大小是“14px”;Bootstrap是一个基于HTML、CSS、JavaScript的开源框架,用于快速构建基于PC端和移动端设备的响应式web页面,并且默认的行高为“20px”,p元素行高为“10px”。

bootstrap是免费的吗bootstrap是免费的吗Jun 21, 2022 pm 05:31 PM

bootstrap是免费的;bootstrap是美国Twitter公司的设计师“Mark Otto”和“Jacob Thornton”合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,开发完成后在2011年8月就在GitHub上发布了,并且开源免费。

bootstrap modal 如何关闭bootstrap modal 如何关闭Dec 07, 2020 am 09:41 AM

bootstrap modal关闭的方法:1、连接好bootstrap的插件;2、给按钮绑定模态框事件;3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),