datatable 2table表 联动（点击行控制右边的表格）

看到这标题，就知道这个业务多复杂了。百度了很久，就是没找到几个很有用的，由于datatable很多种版本，查询的都各种不同。

在这里，我把我实现的发布出来，希望后面有使用到的，有个提示作用

样式上需要增加样式

   #group_list_wrapper {
        float: left !important;
        _display: inline;
        width: 30%;
    }

    #person_list_wrapper {
        float: right !important;
        _display: inline;
        width: 50%;
    }

首先页面排布：

 <table class="table table-border table-bordered table-hover table-bg" id="group_list">
            <thead>
            <tr class="text-c">
                <th style="display: none"></th>
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="80">名称</th>
                <th width="100">大小</th>
                <th width="80">创建时间</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${page.list}" var="c">
                <tr class="text-c">
                    <td style="display: none">${c.groupId}</td>
                    <td><input type="checkbox" value="${c.groupId}" name="checkbox"></td>
                    <td>${c.name}</td>
                    <td>${c.size}</td>
                    <td><fmt:formatDate value="${c.createTime}" pattern="yyyy-MM-dd"/></td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <table class="table table-border table-bordered table-hover table-bg" id="person_list">
            <thead>
            <tr class="text-c">
                <th width="80">姓名</th>
                <th width="100">性别</th>
                <th width="80">年龄</th>
                <th width="80">创建时间</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

这里是2个table ,一个id是group_list 另外一个是person_list

<script type="text/javascript">
    var oTable;
    $(function () {
        oTable = $('#group_list').dataTable({
            "aaSorting": [[2, "desc"]],//默认第几个排序
            "bStateSave": true,//状态保存
            "aoColumnDefs": [
                {"orderable": false, "aTargets": [0, 1]}// 制定列不参与排序
            ]
        });
　　　　　　//点击行事件，触发ajax去拿出table的数据，然后展示出来
        oTable.$('tr').click(function () {
            var data = oTable.fnGetData(this);
            var personTable = $('#person_list').dataTable({
                "aaSorting": [[2, "desc"]],//默认第几个排序
                "bStateSave": true,//状态保存
//                "bServerSide": true, //指定从服务器端获取数据 这个加了就把页面的分页无效了
//                "retrieve": true,//Cannot reinitialise DataTable,解决重新加载表格内容问题 (这种不行)
                "destroy":true, //Cannot reinitialise DataTable,解决重新加载表格内容问题   这种ok
                "aoColumnDefs": [
                    {"orderable": false, "aTargets": [0, 1]}// 制定列不参与排序
                ],
//                "sAjaxSource": "/dataGrid.json",  
////                "fnServerParams": function ( aoData ) {
////                    aoData.push({"groupId":data[0]"});
////                },
//                "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
//                    aoData.push({"name":"groupId","value":data[0]});
                   "ajax" :{
                        "dataType": 'json',
                        "type": "POST",
                        "url": '/dataGrid.json',
                        "data": {"groupId":data[0]},
                    },
//                },
                //列表表头字段
                "columns": [
                    {"data": "personName"},
                    {"data": "sex"},
                    {"data": "age"},
                    {"data": "createTime"},
                ]
            }).api();

            personTable.$('tr').click(function () {
                var data = oTable.fnGetData(this);
                layer_show('人员信息', '/detailUI.html?personId=' + data[0], '550', '500');
            });
        });d
    });

</script>

请求后台，后台返回的数据

  @RequestMapping(value = "dataGrid", method = RequestMethod.POST)
  @ResponseBody
  public Object dataGrid(Student student) throws Exception {
    Page<Student> page =
       studentService.findPage(new Page<Student>(), student);
    Map<String, Object> result = new HashMap<String, Object>();
      result.put("data", page.getList());
//      map.put("aData", page.getList());//数据集合
//    String datastr =
//        "{ 'mData':[{ 'groupId':25543254345325,'groupName' : 'aaa', 'faceSize' : 12288, 'createTime' : false }]}";
    return result;
  }

放到map里就可以了。原来搞json啥的，都没管用，后面直接用MAP就搞定了。这种相关的文档，真心没找到，我就大概试了下，试出来的。

转载于:https://www.cnblogs.com/xuerong/p/8688419.html