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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
js实现聊天对话框
Feb 08 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
使用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
function.inc.php超越php
2006/12/09 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
CI框架Session.php源码分析
2014/11/03 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
js jquery数组介绍
2012/07/15 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
React diff算法的实现示例
2018/04/20 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
2015年教务工作总结
2015/05/23 职场文书
公司食堂管理制度
2015/08/05 职场文书
学校远程教育工作总结
2015/08/11 职场文书
学前班教学反思
2016/02/24 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
浅谈Python中对象是如何被调用的
2022/04/06 Python