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

<!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. redis常用

    redis的key和string类型value限制均为512MB

  2. Options Menu的android3.0以上和以下版本显示刷新原理，刷新适配

    一 显示区别: 2.3.x及以下版本,需要按菜单键显示菜单,当菜单打开时,第一个可见的部分是图标菜单,最多可容纳6个菜单项.如果你的菜单包括Android的地方超过6项,第六项,其余将被归到”More ...

  3. css 设置table样式

    <style type="text/css" >      table tr td{height:39px; font-size: 13px; line-height: ...

  4. SpringBoot源码篇：深度分析SpringBoot如何省去web.xml

    一.前言 从本博文开始,正式开启Spring及SpringBoot源码分析之旅.这可能是一个漫长的过程,因为本人之前阅读源码都是很片面的,对Spring源码没有一个系统的认识.从本文开始我会持续更新, ...

  5. arch安装软件提示包损坏

    错误:lib32-libjpeg6-turbo: signature from "Colin Keenan <colinnkeenan@gmail.com>" is u ...

  6. Java 在使用@Select遇到的问题：拼接字符串将数组拼为了字符串

    Java再用@Select拼接sql语句时候, #{参数名}:是加引号的 ${参数名}:是不加引号的 例如: userIds为List或者数组,值为1,2,3,4,5 1.@Select(" ...

  7. Get和Post的请求

    get post请求 <form method="post","get", action="a.ashx"> <input ...

  8. oracle 清空数据库缓存

    oracle 清除数据库缓存: alter system flush shared_pool ; alter system flush BUFFER_CACHE ;

  9. notepad++ 等用正则表达式自动添加sql引号（宏）

    一般sql语句会经常用到给括号里的内容添加引号,sql如下 Select * From Test ', ', ', ', ', '); 一开始参考了http://blog.sina.com.cn/s/ ...

  10. spa 小程序的研发随笔 (1) --- 前言

    半年前跳槽, 新公司主要研发倾向于小程序的开发.由于之前并没有接触小程序,所以经过半年的实际开发,才敢来做一点笔记. 小程序提供很多组件给开发者使用,但是,实际使用中还是会有很多的问题. 小程序的组件 ...