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

<!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. python3.6下安装wingIDE破解方法

    1.wingIDE的下载: 在电脑配置好的python环境情况下,去官网下载wingIDE6,按照一般方式安装好.安装好它会自动提示你是否激活,你点击激活.然后到下一步. 2.脚本的制作: impor ...

  2. Docker 镜像制作 CentOS+JDK+Tomcat

    [root@localhost createImages]# ls apache-tomcat-.tar.gz server-jre-8u121-linux-x64.tar.gz [root@loca ...

  3. Python list, dict, set, tuple

    list方法 append: 添加一个新的元素到末尾 extend: 扩展元素 insert: 在任何位置插入元素 pop: 弹出末尾的元素 remove: remove first occurren ...

  4. .net 向新页面跳转的语句

    1. href='##' onclick=\"window.open('../DataSplit/DrugInfo_ManualVersionViewNew.aspx?id=" + ...

  5. jquery初始

    今天我们来学习Jquery的一些基本知识,jquery相对来说还是比较重要的,所以还是要好好学习的. 首先要了解什么是jQuery? l类似于python里面的模块,可以看成是一种库或者插件. 在学习 ...

  6. python基本数据类型,int,bool,str

    一丶python基本数据类型 1.int 整数,主要用来进行数学运算. 2.str 字符串,可以保存少量数据并进行相应的操作 3.bool 判断真假.True.False 4.list 存储大量数据, ...

  7. EasyUI整理学习

    参考博客: https://www.cnblogs.com/adc8868/p/6647680.html http://www.jeasyui.com/documentation/# http://w ...

  8. Git命令--保存用户名和密码

    使用git各项操作时,总是会出现输入密码的弹窗,且需要多次输入,很是繁琐,通过git命令可以记住密码,避免多次操作. 一.创建保存密码的文件 1.在home文件夹,一般是 C:\Documents a ...

  9. Kyligence Analytics Platform Enterprise

    平台: arm 类型: ARM 模板 软件包: kap 2.3 kyanalyzer 2.3 apache kylin basic software bi big data cube data war ...

  10. hadoop上传文件失败报错（put: Cannot create file/eclipse.desktop._COPYING_. Name node is in safe mode.）

    解决办法: 离开安全模式方法:执行以下命令即可 bin/hadoop  dfsadmin -safemode leave 若不处理安全模式的话,web服务无法启动,dfsadmin report结果异 ...