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

<!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. 设计模式——工厂方法(Factory Method)

    定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. ——DP UML类图 模式说明 抽象业务基类 实际业务类的公共基类,也是工厂要创建的所有对象的父类,这部分 ...

  2. JS绑定事件和移除事件的处理方法

    addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...

  3. [Environment Build] 工作中遇到的关于Git的问题

    修改已经提交的commit中的author, commit git commit --amend --author 'Your Name <Your Email>' git commit ...

  4. KBEngine warring项目源码阅读（一） 项目简介和注册

    首先介绍下warring项目,是kbe自带的一个演示示例,大部分人了解kbe引擎也是从warring项目开始的. 项目地址:https://github.com/kbengine/kbengine_u ...

  5. JDBC连接数据库（Servlet+JSP）

    JDBC(Java Database connectivity),是连接数据库的一种方式.后面的框架Mybatis和Hibernate等都封装的是JDBC.在JDBC中常用的API有4个:Driver ...

  6. GCC 编译错误 relocation truncated to fit: R_X86_64_32S against `.bss'

    问题如下图所示:(.text+0x53a): relocation truncated to fit: R_X86_64_32S against `.bss' 以前在Linux中编译程序,从来没有遇到 ...

  7. Alembic基本使用

    1.alembic init YOUR_ALEMBIC_DIR 该目录下会有alembic.ini以及YOUR_ALEMBIC_DIR的目录. alembic.ini 提供了一些基本的配置 YOUR_ ...

  8. String.format()的用法

    string.format()用法 2011-06-21 14:58:57|  分类: 工作笔记 |  标签:string  format用法   |字号大中小 订阅 1.格式化货币(跟系统的环境有关 ...

  9. 【ros-kinetic iai_kinect2 opencv2 3 】注意事项

    iai_kinect2 :  https://github.com/code-iai/iai_kinect2/tree/master/kinect2_registration kinect2_brid ...

  10. JS 中的string.lastIndexOf()

    一直转不过来一个弯,就是string.lastIndexOf(searchString,position)  当有position这个参数时,结果是什么 先看代码: var text = 'Missi ...