zoukankan      html  css  js  c++  java
  • 对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>&nbsp;<i class="fa fa-times" id="delete">删除</i>&nbsp;<i class="fa fa-star-o" id="focus">关注</i>&nbsp;<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>&nbsp;<i class="fa fa-times" id="delete">删除</i>&nbsp;<i class="fa fa-star-o" id="focus">关注</i>&nbsp;<i class="fa fa-share-square-o" id="share">分享</i>';}
    else {return '<i class="fa fa-edit" id="edit">编辑</i>&nbsp;<i class="fa fa-times" id="delete">删除</i>&nbsp;<i class="fa fa-star" id="focus">已关注</i>&nbsp;<i class="fa fa-share-square-o" id="share">分享</i>';} } }, ],});
  • 相关阅读:
    代码301的弊端和处理方法
    seo如何发外链
    seo工程师是什么,需要什么技能?
    优化一个关键词到百度首页需要多少钱
    搜索引擎优化顾问机构好不好
    谷歌分析(GA)新版的有哪些改变
    什么是相关性链接/网站相关性
    JS的部分部分疑问和小结
    Groovy学习:第一章 用Groovy简化Java代码
    SpringMVC学习(8):国际化
  • 原文地址:https://www.cnblogs.com/We612/p/10238872.html
Copyright © 2011-2022 走看看