jQuery - 第三方表格插件DataTables使用详解13（点击展开单元格显示详情）

2018-04-01 发布：hangge 阅读：3138

二十四、点击展开单元格, 并显示详细信息

1，效果图

（1）点击每行头部图标可以将该行展开，显示出详细信息（支持同时展开多行）。

（2）如果已经打开的话，再次点击则是收起。

2，数据文件（data.txt）

{
  "data": [
            {
               "id": "001",
               "name": "张三",
               "birthday": "2015-12-31",
               "email": "open3@qq.com",
               "info": "毕业于华东职业贸易技术学校。"
            },
            {
               "id": "002",
               "name": "李四",
               "birthday": "2001-11-31",
               "email": "lili4@qq.com",
               "info": "小学毕业，现在家务农。"
            },
            {
               "id": "003",
               "name": "王五",
               "birthday": "2011-12-31",
               "email": "kingFive@qq.com",
               "info": "李四的发小，住他家隔壁。"
            }
  ]
}

3，页面代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.1.1.js"  type="text/javascript"></script>
    <script src="media/js/jquery.dataTables.js"  type="text/javascript"></script>
    <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" />
    <style media="screen">
      /** 展开按钮 **/
      td.details-control {
        background: url('./details_open.png') no-repeat center center;
        cursor: pointer;
      }

      /** 收起按钮 **/
      tr.shown td.details-control {
        background: url('./details_close.png') no-repeat center center;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        //表格初始化
        var table = $('#myTable').DataTable({
          "ajax": 'data.txt',
          columns: [
              {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
              },
             { data: 'id'},
             { data: 'name'},
             { data: 'birthday'}
          ],
          "order": [[1, 'asc']]
        });

        //给每一行添加展开或收起的监听
        $('#myTable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                //如果该行已经打开，则关闭
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                //关闭这已行
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );

      });

      /*根据条目数据返回需要显示的详情*/
      function format ( d ) {
          return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
              '<tr>'+
                  '<td>姓名:</td>'+
                  '<td>'+d.name+'</td>'+
              '</tr>'+
              '<tr>'+
                  '<td>邮箱:</td>'+
                  '<td>'+d.email+'</td>'+
              '</tr>'+
              '<tr>'+
                  '<td>简介:</td>'+
                  '<td>'+d.info+'</td>'+
              '</tr>'+
          '</table>';
      }
    </script>
  </head>
  <body>
    <table id="myTable" class="display">
        <thead>
            <tr>
                <th></th>
                <th>编号</th>
                <th>姓名</th>
                <th>出生日期</th>
            </tr>
        </thead>
    </table>
  </body>
</html>

展开关闭图标：

image.zip