BootStrap数据表格实例代码


Posted in Javascript onSeptember 13, 2017

首先初始化页面

$(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'      '+'<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\',\''+realName+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>分配</a>' +'      '/*+
            '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="editTw(\''+userId+'\',\''+amount+'\',\''+realName+'\',\''+validDateEnd+'\',\''+row.id+'\');"> <i class="icon-edit icon-white"></i>编辑</a>'*/;
        }else{
         return '<a class="btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="sendCoin(\''+userId+'\');"> <i class="icon-edit icon-white"></i>分配</a>';
        }
     }
     }
   ],
   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 = '';
   $.each(row, function(key, val){
     html += "<p>" + key + ":" + val + "</p>"
   });
   return html;
  }
})
  /*$('#archives-table').bootstrapTable('hideColumn', 'userInfo.id');*/
  /*$("#searchBtn").click(function() {
   var realName = $("#realName").val();
   $.ajax({
     type: "post",
     url: "/coinSend/list",
     data: {param : param},
     dataType:"json",
     success : function(json) {
      $("#archives-table").bootstrapTable('load', json);//主要是要这种写法
     }
   });
  });*/
})

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

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

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

总结

以上所述是小编给大家介绍的BootStrap数据表格实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 #Javascript
Angular CLI 安装和使用教程
Sep 13 #Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 #Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 #Javascript
You might like
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Yii核心验证器api详解
2016/11/23 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
javascript的函数
2007/01/31 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python 性能优化方法小结
2017/03/31 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python 带时区的日期格式化操作
2020/10/23 Python
销售行业个人求职自荐信
2013/09/25 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
银行办公室岗位职责
2014/03/10 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
优秀大学生申请书
2019/06/24 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL