第一种方法是网上看到的，没成功，贴出来参考一下

<!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>

第二种方法是：

加个title属性就好了

"targets": [11],

"render": function (data, type, full, meta) {

    if (data.length > 10) {

        return "<a title='" + data + "' href='#' style='text-decoration: none;'>" + data.trim().substr(0, 10) + "..." + "</a>";

    } else {

        return data;

    }
另附Datatable文档链接：
https://datatables.net/blog/2016-02-26

http://datatables.club/reference/api/

Datatable 省略显示列中内容，当鼠标放在内容上，悬浮显示全部内容的更多相关文章

  1. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  2. 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  3. 利用javaScript实现鼠标在文字上悬浮时弹出悬浮层

    在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失.比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: < ...

  4. C# 查出数据表DataTable 清除一列中的重复项保留其他项

    http://bbs.csdn.net/topics/391085792     DataTable 老表= 新表.AsEnumerable().GroupBy(p => p["姓名& ...

  5. Excel表格中依据某一列的值，将这列中一样的数据放在一个文件中。

    一需求:按照标题C的内容,一样的数据整理到一个文件中. 二.操作: 1.atl+F11弹出vb窗口 2.点击       插入===>模块   ,复制以下代码,注意这是一个表头为三行的函数(保存 ...

  6. 在echarts中自定义直方图bar上悬浮透明窗文本内容

    直接贴代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  7. Java基础 awt Button 鼠标放在按钮上背景颜色改变,鼠标离开背景颜色恢复

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  8. 9.7 top：实时显示系统中各个进程的资源占用状况

    top命令 用于实时地对系统处理器状态进行监控,它能够实时地显示系统中各个进程的资源占用状况.该命令可以按照CPU的使用.内存的使用和执行时间对系统任务进程进行排序显示,同时top命令还可以通过交互式 ...

  9. Bootstrap3基础 disabled 多选框 鼠标放在方框与文字上都出现禁止 标识

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

随机推荐

  1. Ubuntu14.04下sogou输入法的输入框只显示英文不显示中文的问题

    解决方法:首先强制更新,把依赖文件全部安装 sudo apt-get install -f 如果仍然不管用,删除sogou的配置文件,在~/.config目录下,一般情况下是SogouPY.Sogou ...

  2. 小小粉丝度度熊 二分答案　＋ two pointer

    http://acm.hdu.edu.cn/showproblem.php?pid=6119 发现自己的two pointer能力超弱. 这题是合并时间后,二分答案. 可以知道对于每个时间区间,合法的 ...

  3. jquery字符串数组转json字符串 C#json字符串转字符串list

    一.jquery字符串数组转json字符串 var str=['1','2','3']; var jsonText= JSON.stringify(str);//把一个对象转换成json字符串 str ...

  4. Practice encryptedblobstore

    C++ BlobStore 使用范例(C++伪代码) 一个可能的接口设计示例(C++) Java BlobStore 使用范例(Java伪代码) 一个可能的接口设计示例(Java) 一个基于Key/V ...

  5. mysql sql语句集锦

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  6. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  7. Ubuntu 14.04上安装Riak

    一.安装riak   1. 安装包:riak_2.0.2-1_amd64.deb    路    径:~/software/riak_2.0.2-1_amd64.deb 2. 安装riak     $ ...

  8. Centos7.5搭建ELK-6.5.0日志分析平台

    Centos7.5搭建ELK-6.5.0日志分析平台 1. 简介 工作工程中,不论是开发还是运维,都会遇到各种各样的日志,主要包括系统日志.应用程序日志和安全日志,对于开发人员来说,查看日志,可以实时 ...

  9. [备忘]java 静态块、非静态块、静态函数、构造函数 执行顺序

    原文链接:http://liqita.iteye.com/blog/1472717 java中经常有一些静态块,这是用来在生成类之前进行的初始化,无论java还C++语言中的static,都是最先初始 ...

  10. hibernate课程 初探单表映射3-5 hibernate增删改查

    本节简介: 1 增删改查写法 2 查询load和查询get方法的区别 3 demo 1 增删改查写法 增加 session.save() 修改 session.update() 删除 session. ...