关闭

Bootstrap框架----DataTables列表折叠列

标签: dataTables折叠列ajax请求新数据
515人阅读 评论(0) 收藏 举报
分类:

我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。
Bootstrap框架——DataTables列表示例

本章学习行详细内容的展开与折叠,当数据量多时,可以通过点击按钮后再去请求获取数据进行展示。

官网例子参考
行详细内容的展开与折叠
http://datatables.club/example/user_share/row_details.html

环境准备

DataTables列表折叠列的使用建立在上篇文件的基础上
Bootstrap框架——DataTables列表示例

最终效果

实现方案

在列头中增加一列

<th width="6%">详情</th>

在datatables初始化的js列绑定columns数组中对应增加一列

     , {
                        "data": "id",
                        "class": "text-center",
                        "render": function (id, type, row, position) {
                            return  '<span class="expand-detail">...</span>';
                        }
                    }

在与colunms并列的位置添加createdRow属性

  "createdRow": function (row, data, index) {
              $(row).attr('index', index);
          },

在dataTables初始化的方法后绑定点击事件

.on('click', 'span.expand-detail', function (event) {
        toggleDetailRow($(this).closest("tr").attr("index"));
    })

在定义名为$dt的dataTable的refreshTable方法中增加toggleDetailRow方法
toggleDetailRow方法主要实现要显示内容的构造,如果要请求数据的话,可以使用ajax去请求。

/**
     * toggle详情内容
     * @param index 展开详情的索引
     * @param forceUpdate 是否强制更新内容
     */
    function toggleDetailRow(index, forceUpdate) {
        var row = $dt.DataTable().row(index);
        var data = row.data();
        var $tr = row.nodes().to$();
        var $nextTr = $tr.next("tr");
        if ($nextTr.is('.row-detail')) {
            $nextTr.remove(); // 移除
            if (!forceUpdate) return;
        }

        var writer = [];
        writer.push('<tr class="row-detail"><td colspan="' + $tr.children().length + '"><div>');
        writer.push($.format('<h4>姓名:{name}</h4>', data));
        writer.push('<h4>li样式:</h4>');
        writer.push('<ul class="status-hisotry">');
        for (var i = 0;i<3; i++) {
            i > 0 && writer.push('<li class="glyphicon glyphicon-arrow-right"></li>');
            writer.push('<li class="status">'+i+'</li>');
        }
        writer.push('</ul>');
        writer.push($.format('<div id="info-{name}">信息加载中...</div>', data));
        writer.push('</div></td></tr>');
        $tr.after(writer.join(''));
        $.ajax({
            url: '/findContact?name=' + data.name,
            cache: true,
            dataType: 'json'
        }).done(function (res) {
            if (!res.code) {
                if (res.data) {
                    $('#info-' + data.name).replaceWith($.format('<h4>测试ajax获取信息:<a href="/findContact?name={name}">{name}</a></h4>', res.data));
                } else {
                    $('#info-' + data.name).replaceWith('<h4>未查到相关联系人信息</h4>');
                }
            } else {
                $('#info-' + data.name).replaceWith(res.error);
            }
        });
    }

在refreshTable方法方法外增加toggleDetailRow中用到的format定义

/**
   * 格式化字符串 第一个参数为格式化模板 format('this is a {0} template!', 'format');
   * format('this is a {0.message} template!', { message: 'format'}); 等同于
   * format('this is a {message} template!', { message: 'format' });
   */
$.format = function() {
  var template = arguments[0],
    templateArgs = arguments,
    stringify = function(obj) {
      if (obj == null) {
        return '';
      } else if (typeof obj === 'function') {
        return obj();
      } else if (typeof obj !== 'string') {
        return JSON.stringify ? JSON.stringify(obj) : obj;
      }
      return obj;
    };
  return template.replace(/\{\w+(\.\w+)*\}/g, function(match) {
    var propChains = match.slice(1, -1).split('.');
    var index = isNaN(propChains[0]) ? 0 : +propChains.shift();
    var arg, prop;
    if (index + 1 < templateArgs.length) {
      arg = templateArgs[index + 1];
      while (prop = propChains.shift()) {
        arg = arg[prop] == null ? '' : arg[prop];
      }
      return stringify(arg);
    }
    return match;
  });
};

增加样式

  <style type="text/css">
    .row-detail td {
        background-color: #eee;
    }

    .row-detail td:first-child:before{
    content:'' !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background-color:transparent !important;
    box-shadow:none !important;
    }

    .row-detail .status {
        text-align: center;
        display: inline-block;
        min-width: 80px;
    }

    .row-detail .glyphicon-arrow-right {
        vertical-align: top;
        margin: 2px 10px 0 10px;
        color: green;
    }

    .remark-history .remark {
        margin-left: 30px;
    }

    .expand-detail {
        display: block;
        line-height: 60px;
        cursor: pointer;
    }
</style>

IndexController中增加方法

  @RequestMapping("/findContact")
        @ResponseBody
        public Object findContact(@RequestParam String name) {
          Contacts contact= mongoTemplate.findOne(new Query(Criteria.where("name").is(name)), Contacts.class);
          if(contact!=null) {
              return  JSONResult.success(contact);
          }
          return JSONResult.error("未查询到联系人");
        }

JSONResult

package com.test.web.message.response;

/**
 * JSONResult
 * 标准化的JSON响应
 * 
 * <pre>
 * {@link JSONResult#success(Object)}
 * {@link JSONResult#error(String)}
 * </pre>
 * 
 * 
 */
public class JSONResult {

    /**
     * 成功的代码
     */
    public static final int         CODE_SUCCESS            = 0;

    /**
     * 错误的代码,可根据错误类型进行详细分类
     */
    public static final int         CODE_ERROR              = -1;

    /**
     * 空白的成功响应
     */
    public static final JSONResult  RESULT_SUCCESS_NO_DATA  = new JSONResult(CODE_SUCCESS, null, null);

    private int                     code;
    private String                  msg;
    private Object                  data;

    /**
     * 创建一个成功的响应
     * 
     * @param data
     * @return
     */
    public static JSONResult success(Object data) {
        return new JSONResult(CODE_SUCCESS, null, data);
    }

    /**
     * 创建一个错误的响应
     * 
     * @param msg
     * @return
     */
    public static JSONResult error(String msg) {
        return new JSONResult(CODE_ERROR, msg, null);
    }

    /**
     * @param code
     * @param msg
     * @param data
     */
    public JSONResult(int code, String msg, Object data) {
        this.code = code;
        this.setMsg(msg);
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public JSONResult setCode(int code) {
        this.code = code;
        return this;
    }

    public Object getData() {
        return data;
    }

    public JSONResult setData(Object data) {
        this.data = data;
        return this;
    }

    public String getMsg() {
        return msg;
    }

    public JSONResult setMsg(String msg) {
        this.msg = msg;
        return this;
    }

}

完整Jsp

<%@ include file="./include/header.jsp"%>  
  <style type="text/css">
    .row-detail td {
        background-color: #eee;
    }

    .row-detail td:first-child:before{
    content:'' !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background-color:transparent !important;
    box-shadow:none !important;
    }

    .row-detail .status {
        text-align: center;
        display: inline-block;
        min-width: 80px;
    }

    .row-detail .glyphicon-arrow-right {
        vertical-align: top;
        margin: 2px 10px 0 10px;
        color: green;
    }

    .remark-history .remark {
        margin-left: 30px;
    }

    .expand-detail {
        display: block;
        line-height: 60px;
        cursor: pointer;
    }
</style>

<!-- jquery.dataTables.css -->
<link href="/plugins/DataTables-1.10.16/media/css/dataTables.bootstrap.css" rel="stylesheet"
          type="text/css"></link>
<link rel="stylesheet" href="/plugins/DataTables-1.10.16/extensions/Responsive/css/responsive.dataTables.css"></link>
  <!-- DATE STYLES-->
<link rel="stylesheet" href="/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"></link>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<%@ taglib prefix="cf" uri="com.data.web.view.function" %>  
        <div id="page-wrapper">  
            <div id="page-inner">  


        <div class="row">  
                    <div class="col-md-12">  
                        <h1 class="page-header">  
              DataTables<small>示例</small>  
                        </h1>  
                    </div>  
       </div>  


       <div class="row">
            <form class="form-inline col-sm-11" id="search_form">
                <div class="form-group ">
                    <input class="form-control" placeholder="名称或其他" name="name">
                </div>
                <div class="form-group">
                    <select class="form-control" id="gender" name="gender">
                        <option value="">--</option>
                        <option value=1></option>
                        <option value=0></option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="beginTime">开始</label> <input type="text"
                        class="datepicker form-control"
                        data-date-format="yyyy-mm-dd 00:00:00" name="beginTime"
                        id="beginTime" />
                </div>
                <div class="form-group">
                    <label for="endTime">截止</label> <input type="text"
                        class="datepicker form-control"
                        data-date-format="yyyy-mm-dd 23:59:59" name="endTime" id="endTime" />
                </div>
                <button type="button" id="query" class="btn btn-success query mt-5">查询</button>
                <button type="button" id="add" class="btn btn-info add mt-5">新建</button>
            </form>
        </div>
        <!-- /. ROW  -->


      <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">示例列表</div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered responsive table-hover" id="table" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th width="8%" >姓名</th>
                                        <th width="10%" >电话</th>
                                        <th width="10%" >性别</th>
                                        <th width="10%" class="desktop">时间</th>
                                        <th width="8%" class="desktop">操作</th> 
                                        <th width="6%">详情</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /. ROW  -->

        </div>  
            <!-- /. PAGE INNER  -->  
        </div>  
        <!-- /. PAGE WRAPPER  -->  
 <%@ include file="./include/footer.jsp"%>  
 <!-- DATA TABLE SCRIPTS -->
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/dataTables.bootstrap.min.js"></script>
<script src="/plugins/DataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('.datepicker').datetimepicker({
        language : 'zh-CN',
        autoclose : true
    });

    refreshTable();//刷新列表数据内容
    clickEvent();//绑定表格中的按钮事件

    //点击查询  
    $('button.query').on("click", function() {
        refreshTable();
        clickEvent();
    });

    $('button.add').on('click',function(){
        location.href = '/create';
    });

});
function clickEvent(){
    $('#table').on('click','.js-delete',function(){
        if(confirm('确认删除该条数据?')){
            var id = $(this).attr('data-id');
            $.get('/delete?id='+id+'', function(result){
            console.log(result);
                if(result==0){
                    alert('删除成功');
                    window.location.reload();
                }
            })
        }
    }).on('click','.js-edit',function(){
        var id = $(this).attr('data-id');
        location.href = '/edit?id='+id+'';
    })
}

function refreshTable(){

    var $searchForm = $('#search_form').on('submit', function () {
        $dt.DataTable().searchEx({}).draw();
        return false;
    });

    var $dt = $('#table').on('preXhr.dt', function (e, settings, data) {
        //data.search.value = $searchForm.formGet();
    }).dataTable({
        "columns" : [
            {
                "data" : "name",
                "class" : "text-center"
            },
            {
                "data" : "tel",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    if(data){
                    var ms="00-";
                    ms=row.name+"的电话"+ms+data;
                    return ms;
                    }
                    return "";
                }
            },
            {
                "data" : "gender",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    if(data==0){
                    return "女";
                    }else if(data==1){
                    return "男";
                    }
                    return "";
                }
            },
            {
                "data" : "creatTime",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    return new Date(data).Format("yyyy-MM-dd hh:mm:ss");  
                }
            },
            {
                "data" : "id",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    return '<span class="btn btn-primary btn-xs ml-5 js-edit" data-id="'+data+'">编辑</span> <span class="btn btn-danger btn-xs ml-5 js-delete" data-id="'+data+'">删除</span>';
                }
            }, {
                "data": "id",
                "class": "text-center",
                "render": function (id, type, row, position) {
                    return  '<span class="expand-detail">...</span>';
                }
            }
          ],
         "createdRow": function (row, data, index) {
              $(row).attr('index', index);
          },
        "ajax" : {//类似jquery的ajax参数,基本都可以用。
            type : "post",//后台指定了方式,默认get,外加datatable默认构造的参数很长,有可能超过get的最大长度。
            url : "/listData",
            dataSrc : "data",//默认data,也可以写其他的,格式化table的时候取里面的数据
            data : function(d) {//d 是原始的发送给服务器的数据,默认很长。
                var param = {};//因为服务端排序,可以新建一个参数对象
                param.start = d.start;//开始的序号
                param.length = d.length;//要取的数据的
                var formData = $(
                        "#search_form")
                        .serializeArray();//把form里面的数据序列化成数组
                formData
                        .forEach(function(e) {
                            param[e.name] = e.value;
                        });
                return param;//自定义需要传递的参数。
            },
        },
        //"ajax": $.fn.dataTable.pagerAjax({url: "/listData"}),
        "destroy":true,
        lengthChange : false,
        serverSide : true,//分页,取数据等等的都放到服务端去
        searching : false,
        processing : true,//载入数据的时候是否显示“载入中”
        bDestroy : true,
        pageLength : 20,//首次加载的数据条数
        ordering : false,//排序操作在服务端进行,所以可以关了。
        language : {
            processing : "载入中",//处理页面数据的时候的显示
            paginate : {//分页的样式文本内容。
                previous : "上一页",
                next : "下一页",
                first : "第一页",
                last : "最后一页"
            },
            zeroRecords : "没有内容",//table tbody内容为空时,tbody的内容。
            //下面三者构成了总体的左下角的内容。
            info : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//左下角的信息显示,大写的词为关键字。
            infoEmpty : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//筛选为空时左下角的显示。
            infoFiltered : ""//筛选之后的左下角筛选提示(另一个是分页信息显示,在上面的info中已经设置,所以可以不显示),
        },
        "columnDefs": [{
            "defaultContent": "",
            "targets": "_all"
          }]
    }).on('click', 'a[row-index]', function () {
    }).on('click', 'span.expand-detail', function (event) {
        toggleDetailRow($(this).closest("tr").attr("index"));
    }); 





    /**
     * toggle详情内容
     * @param index 展开详情的索引
     * @param forceUpdate 是否强制更新内容
     */
    function toggleDetailRow(index, forceUpdate) {
        var row = $dt.DataTable().row(index);
        var data = row.data();
        var $tr = row.nodes().to$();
        var $nextTr = $tr.next("tr");
        if ($nextTr.is('.row-detail')) {
            $nextTr.remove(); // 移除
            if (!forceUpdate) return;
        }

        var writer = [];
        writer.push('<tr class="row-detail"><td colspan="' + $tr.children().length + '"><div>');
        writer.push($.format('<h4>姓名:{name}</h4>', data));
        writer.push('<h4>li样式:</h4>');
        writer.push('<ul class="status-hisotry">');
        for (var i = 0;i<3; i++) {
            i > 0 && writer.push('<li class="glyphicon glyphicon-arrow-right"></li>');
            writer.push('<li class="status">'+i+'</li>');
        }
        writer.push('</ul>');
        writer.push($.format('<div id="info-{name}">信息加载中...</div>', data));
        writer.push('</div></td></tr>');
        $tr.after(writer.join(''));
        $.ajax({
            url: '/findContact?name=' + data.name,
            cache: true,
            dataType: 'json'
        }).done(function (res) {
            if (!res.code) {
                if (res.data) {
                    $('#info-' + data.name).replaceWith($.format('<h4>测试ajax获取信息:<a href="/findContact?name={name}">{name}</a></h4>', res.data));
                } else {
                    $('#info-' + data.name).replaceWith('<h4>未查到相关联系人信息</h4>');
                }
            } else {
                $('#info-' + data.name).replaceWith(res.error);
            }
        });
    }
}



/**
   * 格式化字符串 第一个参数为格式化模板 format('this is a {0} template!', 'format');
   * format('this is a {0.message} template!', { message: 'format'}); 等同于
   * format('this is a {message} template!', { message: 'format' });
   */
$.format = function() {
  var template = arguments[0],
    templateArgs = arguments,
    stringify = function(obj) {
      if (obj == null) {
        return '';
      } else if (typeof obj === 'function') {
        return obj();
      } else if (typeof obj !== 'string') {
        return JSON.stringify ? JSON.stringify(obj) : obj;
      }
      return obj;
    };
  return template.replace(/\{\w+(\.\w+)*\}/g, function(match) {
    var propChains = match.slice(1, -1).split('.');
    var index = isNaN(propChains[0]) ? 0 : +propChains.shift();
    var arg, prop;
    if (index + 1 < templateArgs.length) {
      arg = templateArgs[index + 1];
      while (prop = propChains.shift()) {
        arg = arg[prop] == null ? '' : arg[prop];
      }
      return stringify(arg);
    }
    return match;
  });
};




//对Date的扩展,将 Date 转化为指定格式的String
//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, 
//年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
//例子: 
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
//(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
 var o = {
     "M+": this.getMonth() + 1, //月份 
     "d+": this.getDate(), //日 
     "h+": this.getHours(), //小时 
     "m+": this.getMinutes(), //分 
     "s+": this.getSeconds(), //秒 
     "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
     "S": this.getMilliseconds() //毫秒 
 };
 if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 for (var k in o)
 if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 return fmt;
}
</script>
</body>  
</html>  
0
0
查看评论

Bootstrap 中datatables 参数详解

datatatables 中一些参数的含义
  • liiuijkiuu
  • liiuijkiuu
  • 2016-07-30 16:01
  • 2082

jquery 实现列表点击折叠与展开的功能

需求是点击列表,展开折叠的内容,再次点击后折叠列表,还要给数据打上已查看的标记,折叠列表后页面刷新,有已查看标记的数据就不会显示. jquery代码: $(function (){ var aa = 0; $(".gradeX").click(funct...
  • grs294845170
  • grs294845170
  • 2017-09-05 13:43
  • 407

DataTables(二) —— 行分组信息展开与折叠的功能实现

DataTables是一个功能非常强大的带有分页功能的jQuery插件。之前在博客里写过一篇有关DataTables分页功能的博文,本篇里就不在重复了,只介绍一下DataTables行分组的展开与折叠功能的实现。 一、效果图 二、用到的js与Css ...
  • zdx1515888659
  • zdx1515888659
  • 2014-12-02 15:01
  • 12836

jquery.dataTables表格列动态显示隐藏封装(二)

jquery.dataTables 列动态显示隐藏
  • weiyongliang_813
  • weiyongliang_813
  • 2015-05-24 21:51
  • 7998

Bootstrap框架----DataTables列表示例

简介 DataTables是一款比较好用的可以在bootstrap中使用的jquery表格插件。 它是一个高度灵活的工具,可以为任何HTML表格添加高级的交互功能。 DataTables特点 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处...
  • q383965374
  • q383965374
  • 2018-01-30 21:42
  • 499

js折叠列表的小例子

想实现折叠的列表吗?就来吧
  • wgp15732622312
  • wgp15732622312
  • 2016-07-17 20:46
  • 851

Bootstrap之侧边导航菜单(可折叠分组)

效果图: 源码:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta h...
  • shangmingchao
  • shangmingchao
  • 2015-11-10 18:09
  • 70098

Datatables:列的自定义呈现

官网的网址是:http://www.datatables.net/examples/advanced_init/column_render.html 内容很好理解。例子代码也不复杂,如下: $(document).ready(function() {   &...
  • feiying008
  • feiying008
  • 2015-05-14 08:32
  • 5181

datatables动态添加隐藏行

开发的是订单管理页面,要实现功能,用户查看订单列表,单击详情时从后台取到该订单内的所有商品并胴体展示在表格行内,比较实用的一个内容。 未展开前如上图。 展开后如上图。 html部分
  • ding_zhi_jie
  • ding_zhi_jie
  • 2016-09-27 15:59
  • 3318

Bootstrap框架----DataTables列表移动端适配定义隐藏列

我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化。 Bootstrap框架—-DataTables列表示例 最终效果如图: Bootstrap是自动适配移动端的,在手机上查看效果如图: 我们发现当数据有很多列时,会存在超出屏幕的可能。这时候表...
  • q383965374
  • q383965374
  • 2018-01-31 15:14
  • 597
    个人资料
    • 访问:2380373次
    • 积分:27284
    • 等级:
    • 排名:第242名
    • 原创:613篇
    • 转载:63篇
    • 译文:0篇
    • 评论:323条
    博客专栏