对Datatable中过长内容实行省略话
重点: 当数据长度大于20, 只展示前16个字符,后面的用...代替
var table = $("#datatable-buttonss").DataTable({
"aaSorting": [[ 3, "asc" ]],
"search": "全文搜索",
"pageLength": 16, // 每页展示数量
"lengthMenu": [16, 32, 48],
"displayStart": 0,
// "sPaginationType": "full",
"bJQueryUI" : true,
"sZeroRecords" : "没有您要搜索的内容",
"bPaginate": true, //翻页功能
"bInfo": true,//页脚信息
"bAutoWidth": false,//自动宽度
// "bRetrieve": true,
// "bProcessing": true, //DataTables载入数据时,是否显示‘进度’提示
// "bServerSide" : true, //是否启动服务器端数据导入#}
// "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设
ajax:"/task_mgm/taskDataMine2" + myparas,
"columnDefs":[
{
"targets": [ 0 ],
"Sorting": false,
"width": "5%",
"visible": false
},
{
"targets": [ 1 ],
"Sorting": false,
"render": function ( data, type, row, meta ) {
var order1 = meta.settings._iDisplayStart + meta.row + 1;
var order2 = order1+'、'; // 为每行数据添加索引 如1、 2、 3、 ...
return type === 'display' && data.length > 20 ?
'<span title="'+data+'">'+ data.substr( 0, 16 ) +'...</span>' :order2+data;} // 当数据长度大于20, 只展示前16个字符,后面的用...代替
}, // 给长字符串加省略号
{
"targets": [ 2 ],
"Sorting": false,
"width": "15%",
"render": function (data, type, meta) {
if(data == '非常紧急') {return '<a class="sorting_1" style="background-color: #D94600;">'+ data +'</a>'}
else if(data == '紧急任务') {return '<a class="sorting_1" style="background-color: #F9F900;”'+ data +'</a>'}
else {return '<a class="sorting_1" style="'+ data +'</a>'}
} // 为数据设置不同的背景
},
{"targets": [ 3 ],
"render": function ( data, type, row, meta ) {
var pageType = '?pageType=allPage';
if (type === 'display' && data.length > 20) {
return '<a id="rrrrr" href="/task_mgm/taskinfo_editID=' + row[0] + pageType + '">'+ data.substr(0, 16) + '...</a>'
} // 点击跳转的实现
else {
return '<a id="taskFocus" href="/task_mgm/taskinfo_editID='+ row[0] + pageType + '">' + row[1] + '</a>'
}
}
},
{"targets": [ 4 ],
"Sorting": false,
},
{
"targets": [ 5 ],
"width": "28%",
"text-align": "center",
"orderable": false,
// "defaultContent": '<i class="fa fa-edit" id="edit">编辑</i> <i class="fa fa-times" id="delete">删除</i> <i class="fa fa-star-o" id="focus">关注</i> <i class="fa fa-share-square-o" id="share">分享</i>',
"render": function (data, type, full) {
if(data == 0){return '<i class="fa fa-edit" id="edit">编辑</i> <i class="fa fa-times" id="delete">删除</i> <i class="fa fa-star-o" id="focus">关注</i> <i class="fa fa-share-square-o" id="share">分享</i>';}
else {return '<i class="fa fa-edit" id="edit">编辑</i> <i class="fa fa-times" id="delete">删除</i> <i class="fa fa-star" id="focus">已关注</i> <i class="fa fa-share-square-o" id="share">分享</i>';} } }, ],});
对Datatable中过长内容实行省略话的更多相关文章
- 使用OpenXML将Excel内容读取到DataTable中
前言:前面的几篇文章简单的介绍了如何使用OpenXML创建Excel文档.由于在平时的工作中需要经常使用到Excel的读写操作,简单的介绍下使用 OpenXML读取Excel中得数据.当然使用Open ...
- C#-导入Excel 内容到 DataTable中
C#-导入Excel 内容到 DataTable中 直接传入文件路径,支持所有Excel格式. 缺点:如果数据量庞大会很占内存. public static DataTable ImportExcel ...
- table中的td内容过长显示为固定长度,多余部分用省略号代替
如何使td标签中过长的内容只显示为这个td的width的长度,之后的便以省略号代替. 给table中必须设置属性: table-layout: fixed; 然后给 td 设置: white-spac ...
- C#中DataTable中的Compute方法使用收集
原文: C#中DataTable中的Compute方法使用收集 Compute函数的参数就两个:Expression,和Filter. Expresstion是计算表达式,关于Expression的详 ...
- 在DataTable中更新、删除数据
/*在DataTable中选择记录*/ /* 向DataTable中插入记录如上,更新和删除如下: * ----但是在更新和删除前,首先要找出要更新和删除 ...
- 数据库:MySQL实战;左链接;查询WordPress数据库中的文章内容
在1年前,我用学生价租了一个阿里云服务器(是真的便宜啊),自己在CentOS系统上用命令行搭了个WordPress的环境,开始了为期一个月使用自建博客的历程. 事实证明,博客在类似博客园这样的平台上写 ...
- 使用NPOI导入导出Excel(xls/xlsx)数据到DataTable中
using System; using System.Collections.Generic; using System.Text; using System.IO; using NPOI.SS.Us ...
- winfrom 使用NPOI导入导出Excel(xls/xlsx)数据到DataTable中
1.通过NUGET管理器下载nopi,在引入命令空间 using System; using System.Collections.Generic; using System.Text; using ...
- 【咸鱼教程】Egret中可长按复制的文本(例如复制优惠码)
一 实际效果二 实现原理三 源码下载 在egret中实现长按复制文本效果,一般用于复制优惠码什么的. 一 实际效果 二 实现原理 在egret的游戏元素都是绘制在canvas上的,我们 ...
随机推荐
- react create-react-app 跨域
"proxy":"http://youAddr.com" 直接到根目录package.json里增加上面这行就行了,改成自己需要的地址.
- 后端开发者的Vue学习之路(五)
目录 上节内容回顾 使用第三方组件库 如何发起请求 请求错误处理 请求带参 以get的方式带参: 以post的方式带参: 封装处理 请求的配置 axios实例 实现调用自定义函数来发起请求 抽取axi ...
- java 线程方法 ---- join()
class MyThread2 implements Runnable{ @Override public void run() { for (int i = 0; i < 5; i++){ S ...
- Webpack4教程:第一部分,入口、输入和ES6模块
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...
- 用WijmoJS搭建您的前端Web应用 —— React
前文回顾 在本系列文章中,我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法. 而今天,我们将展示如何使用 WijmoJS 来搭建一款具备独特创新性.出色性能和简单代码逻辑的 Reac ...
- 瓦片切图工具gdal2tiles.py改写为纯c++版本(二)
python这么火,C++/C#的程序员都生存不下去了,为啥还要干把python转写成c++的这种反动的事? 项目需要呗... gdal2tiles.py文件中有两个类是计算全球墨卡托与WGS84两种 ...
- MAC终端常用语法
这篇文章的重点不在于说是对终端语法的讲解,而是方便大家做语法备忘. 方便查找对应终端语法.所以使用了表格形式对常用终端语法进行了汇总, 但是并没有很多的讲解部分. 当然了这里记录的也都是十分基础的语法 ...
- iOS-----------计算两个时间的时间差
UIButton * nameButton = [UIButton buttonWithType:UIButtonTypeCustom]; nameButton.frame = CGRectMake( ...
- (办公)plug-in org.eclipse.jdt.ui was unable to load class org.eclipse.jdt.internal
今天上午开发环境遇到这个问题,解决方案如下,(解决了之后,项目并没有丢失.) 因为Eclipse的这个plug-in org.eclipse.jdt.ui was unable to load cla ...
- 与webview打交道踩过的坑
随着HTML5被越来越多的用到web APP的开发当中,webview这一个神器便日渐凸显出重要地位.简要的说,webview能够在移动应用中开辟出一个窗口,在里面显示html页面,css以及js代码 ...