datatable行内容增多时，收缩行（展示【更多】或者【收起】）

最新推荐文章于 2019-11-28 17:16:57 发布

会飞的猪0629

最新推荐文章于 2019-11-28 17:16:57 发布

阅读量8.2k

点赞数

分类专栏：其他文章标签： datatables

本文链接：https://blog.csdn.net/liyy_sd/article/details/79125503

版权

其他专栏收录该内容

10 篇文章 0 订阅

订阅专栏

datatable行内容增多时，收缩行（展示【更多】或者【收起】）

前言：我们在使用datatables时，可能会遇到单元格内内容太多无法展示完全，省略号的方法使我们看不到全部的内容，已经不能满足我们的需求。想要在单元格内有个按钮【更多】，点击后该单元格的内容完全展示出来，点击【收起】后单元格又恢复原状，不影响排版。
完全展示：
完全展示状态

部分展示：
部分展示状态

贴上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datatables展示切换</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    //切换显示备注信息，显示部分或者全部
    function changeShowRemarks(obj){//obj是td
        var content = $(obj).attr("content");
        if(content != null && content != ''){
            if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注，切换到显示部分
                //$(obj).removeAttr('isDetail');//remove也可以
                $(obj).attr('isDetail',false);
                $(obj).html(getPartialRemarksHtml(content));
            }else{//当前显示的是部分备注信息，切换到显示全部
                $(obj).attr('isDetail',true);
                $(obj).html(getTotalRemarksHtml(content));
            }
        }
    }
    //部分备注信息
    function getPartialRemarksHtml(remarks){
        return remarks.substr(0,10) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>更多</b></a>';
    }

    //全部备注信息
    function getTotalRemarksHtml(remarks){
        return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" >收起</a>';
    }
    $(document).ready(function() {

        $('#example').DataTable({
            "ajax": "arrays.txt",
            "processing": true,
            "columns": [
                {"data": "name"},
                {"data": "hr.position"},
                {"data": "contact.0"},
                {"data": "contact.1"},
                {"data": "hr.start_date"},
                {"data": "hr.salary"}
            ],
            "createdRow": function( row, data, dataIndex ) {
                if(data.hr.position.length > 10){//只有超长，才有td点击事件
                    $(row).children('td').eq(1).attr('onclick','javascript:changeShowRemarks(this);');
                }
                $(row).children('td').eq(1).attr('content',data.hr.position);
            },
            "columnDefs" : [
                {
                    "type": "date",
                    "targets": 1,
                    "render": function (data, type, full, meta) {
                        if (full.hr.position.length  > 10) {
                            return getPartialRemarksHtml(full.hr.position);//显示部分信息
                        } else {
                            return full.hr.position;//显示原始全部信息            }
                        }
                    }
                }
            ]
        })
    })
</script>
</body>
</html>

另外，在array.txt文件中的数据是：

{
  "data": [
    {
      "name": "Tiger Nixon",
      "hr": {
        "position": "System Architect, System Architect,System Architect, System Architect,System Architect, System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25"
      },
      "contact": [
        "Edinburgh",
        "5421"
      ]
    },
    {
      "name": "Garrett Winters",
      "hr": {
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25"
      },
      "contact": [
        "Tokyo",
        "8422"
      ]
    },
    {
      "name": "Ashton Cox",
      "hr": {
        "position": "Junior Technical Author",
        "salary": "$86,000",
        "start_date": "2009/01/12"
      },
      "contact": [
        "San Francisco",
        "1562"
      ]
    },
    {
      "name": "Cedric Kelly",
      "hr": {
        "position": "Senior Javascript Developer",
        "salary": "$433,060",
        "start_date": "2012/03/29"
      },
      "contact": [
        "Edinburgh",
        "6224"
      ]
    },
    {
      "name": "Airi Satou",
      "hr": {
        "position": "Accountant",
        "salary": "$162,700",
        "start_date": "2008/11/28"
      },
      "contact": [
        "Tokyo",
        "5407"
      ]
    },
    {
      "name": "Brielle Williamson",
      "hr": {
        "position": "Integration Specialist",
        "salary": "$372,000",
        "start_date": "2012/12/02"
      },
      "contact": [
        "New York",
        "4804"
      ]
    },
    {
      "name": "Herrod Chandler",
      "hr": {
        "position": "Sales Assistant",
        "salary": "$137,500",
        "start_date": "2012/08/06"
      },
      "contact": [
        "San Francisco",
        "9608"
      ]
    },
    {
      "name": "Rhona Davidson",
      "hr": {
        "position": "Integration Specialist",
        "salary": "$327,900",
        "start_date": "2010/10/14"
      },
      "contact": [
        "Tokyo",
        "6200"
      ]
    },
    {
      "name": "Colleen Hurst",
      "hr": {
        "position": "Javascript Developer",
        "salary": "$205,500",
        "start_date": "2009/09/15"
      },
      "contact": [
        "San Francisco",
        "2360"
      ]
    }
  ]
}