Datatable 省略显示列中内容，当鼠标放在内容上，悬浮显示全部内容
第一种方法是网上看到的，没成功，贴出来参考一下
<!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) + ' <a href="javascript:void(0);" ><b>更多</b></a>';
} //全部备注信息
function getTotalRemarksHtml(remarks){
return remarks + ' <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 省略显示列中内容，当鼠标放在内容上，悬浮显示全部内容的更多相关文章
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...
- 利用javaScript实现鼠标在文字上悬浮时弹出悬浮层
在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失.比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: < ...
- C# 查出数据表DataTable 清除一列中的重复项保留其他项
http://bbs.csdn.net/topics/391085792 DataTable 老表= 新表.AsEnumerable().GroupBy(p => p["姓名& ...
- Excel表格中依据某一列的值，将这列中一样的数据放在一个文件中。
一需求:按照标题C的内容,一样的数据整理到一个文件中. 二.操作: 1.atl+F11弹出vb窗口 2.点击 插入===>模块 ,复制以下代码,注意这是一个表头为三行的函数(保存 ...
- 在echarts中自定义直方图bar上悬浮透明窗文本内容
直接贴代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- Java基础 awt Button 鼠标放在按钮上背景颜色改变,鼠标离开背景颜色恢复
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- 9.7 top：实时显示系统中各个进程的资源占用状况
top命令 用于实时地对系统处理器状态进行监控,它能够实时地显示系统中各个进程的资源占用状况.该命令可以按照CPU的使用.内存的使用和执行时间对系统任务进程进行排序显示,同时top命令还可以通过交互式 ...
- Bootstrap3基础 disabled 多选框 鼠标放在方框与文字上都出现禁止 标识
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
随机推荐
- spark_运行spark-shell报错_javax.jdo.JDOFatalDataStoreException: Unable to open a test connection to the given database.
error: # ./spark-shell Caused by: javax.jdo.JDOFatalDataStoreException: Unable to open a test connec ...
- scala数据类型
# Scala数据类型 ## 1.数值类型 ### 1.1 与Java一样Scala也有8种数值类型 * Byte * Char * Short * Int * Long * Float * Doub ...
- Python 2.x和3.x不同点
1.print和print() 2.yield 出现下面的错误Traceback (most recent call last): File “<pyshell#32>”, line 1, ...
- (转)运维老鸟教你安装centos6.5如何选择安装包
运维老鸟教你安装centos6.5如何选择安装包 原文:http://blog.51cto.com/oldboy/1564620 近来发现越来越多的运维小伙伴们都有最小化安装系统的洁癖,因此,找老男孩 ...
- .Net Core+mySqlSugar的一些稍复杂操作
介绍一些我尝试的mysqlSugar的数据库操作 修改密码 var status = db.Update<Users>(new { password = user.password }, ...
- 从零开始的全栈工程师——js篇2.9（this详解）
this 一.this是js的一个关键字 指定一个对象然后去替代他 只研究函数内的this 分两种 函数内的this和函数外的this1)函数内的this指向行为发生的主体2)函数外的this都 ...
- 动态规划专题（二）——树形DP
前言 \(DP\)这东西真的是博大精深啊...... 简介 树形\(DP\),顾名思义,就是在树上操作的\(DP\),一般可以用\(f_i\)表示以编号为\(i\)的节点为根的子树中的最优解. 转移的 ...
- python setup.py install 报错
python setup.py install 报错信息 [root@VM_25_28_centos psutil-2.0.0]# python setup.py install running in ...
- VC-基础-WebBrowser控件中弹出新网页窗口
用webbrowser控件浏览网页时,常弹出新的网页窗口,若不做任何控制的话,会在默认浏览器(一般是IE)中打开,这样就在新的窗口打开了,原程序就很难控制了,且存在webbrowser控件和IE的se ...
- CUDA：Supercomputing for the Masses (用于大量数据的超级计算)-第七节
第七节:使用下一代CUDA硬件,快乐加速度 原文链接 Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Laboratory)的高级科研人员.他在多个 ...