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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
python继承和抽象类的实现方法
2015/01/14 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python批量启动多线程代码实例
2020/02/18 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
刑事辩护授权委托书范本
2014/10/17 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
离婚协议书怎么写
2015/01/26 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python