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

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

    package scala import scala.collection.mutable /** * Created by EX-CHENZECHAO001 on 2018-04-03. */cla ...

  2. Telerik RadPropertyGrid 设置显隐 Combox选择

    Telerik RadPropertyGrid 的排序按钮.搜索框和描述面板的显隐只要设置SortAndGroupButtons.SearchBox.DescriptionPanel的属性值改为Vis ...

  3. (转)linux 中使用ls指定输出时间格式

    linux 中使用ls指定输出时间格式 原文:http://blog.csdn.net/chaofanwei/article/details/13018753 ls -l --time-style=x ...

  4. .net 记录

    Stack Overflow 2016最新架构探秘 http://www.infoq.com/cn/news/2016/03/Stack-Overflow-architecture-insi#rd N ...

  5. 关于SQL Server数据库中的标识列

    一.标识列的定义以及特点 SQL Server中的标识列又称标识符列,习惯上又叫自增列. 该种列具有以下三种特点: 1.列的数据类型为不带小数的数值类型 2.在进行插入(Insert)操作时,该列的值 ...

  6. Cucumber 场景大纲 Scenario Outlines

    引用链接:https://github.com/cucumber/cucumber/wiki/Scenario-Outlines script/cucumber --i18n zh-CN | feat ...

  7. SpringMVC10 InitBinder 注册自定义编辑器

    1.配置web.xml文件 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...

  8. 16.Ubuntu LTS 16.04安装搜狗输入法全过程记录（纯新手）

    这是我第四次打算转到Ubuntu上了,应该不会像以前那样装个系统就拜拜了.打算先把C和Vim重新学起来,数据结构那本书看完写完,第二步是学python和算法导论,暂定如此. 昨天晚上系统装完以后想着要 ...

  9. nodejs入门学习笔记二——解决阻塞问题

    在最开始,我们要弄清楚node会什么会存在阻塞? node是这么标榜自己的:“在node中除了代码,所有一切都是并行执行的!” 意思是,Node.js可以在不新增额外线程的情况下,依然可以对任务进行并 ...

  10. IIS 处理高并发

    1. 调整IIS 7应用程序池队列长度 由原来的默认1000改为65535. IIS Manager > ApplicationPools > Advanced Settings Queu ...