欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

dataTables的鼠标移入移出,分割内容

程序员文章站 2022-07-13 16:11:10
...

/*鼠标移入移出*/

<style type="text/css">

    table{

        table-layout: fixed;

    }

    .msgtable{

        overflow: hidden;/*内容超出宽度会隐藏超出部分*/

        word-break: keep-all;/*不换行*/

        white-space: nowrap;/*不换行*/

        text-overflow: ellipsis;

 

    }

    .msgtable:hover{

        overflow: unset ;

        white-space: unset ;

        text-overflow: unset !important;

        word-break: break-all;

 

        /*overflow: auto;//滚动条*/

        /*overflow: inherit;  // 鼠标移入显示所有*/

        /*overflow: scroll;//滚动条*/

        /*overflow: visible;// 鼠标移入显示所有*/

 

    }

    .srctable{

        word-wrap:break-word;

    }

</style>

 

 

 "columns": [

                {"data": "tag", "bSortable": true},

                {"data": "msg", "bSortable": false,class:"msgtable"},  //鼠标移除,超出表格宽度的内容用...代替,鼠标移入显示全部内容

                {"data": "src", "bSortable": false,class:"srctable"},

                {"data": "nickname", "bSortable": true},

                {"data": "updatedAt", "bSortable": true},

                {"data": "ip", "bSortable": true},

                {"data": "status", "bSortable": true}

            ]

            ,

            "columnDefs": [

                {

                    "render": function (data, type, row) {   //只显示表格里指定的某一部分内容

                        var subdata=data;

                        if(data.length>30){

                            subdata = data.substr(data.lastIndexOf(".") + 1);

                        }

                        return "<a title='"+data+"' href='javascript:;'>"+subdata+"</a>";

                    },

                    "targets": 2

                }

 

相关标签: dataTables