/*Mouse in and out*/
<style type="text/css">
table{
table-layout: fixed;
}
.msgtable{
overflow: hidden;/*If the content exceeds the width, the excess part will be hidden*/
word-break: keep-all; /* no line break */
white-space: nowrap;/*do not wrap*/
text-overflow: ellipsis;
}
.msgtable:hover{
overflow: unset ;
white-space: unset ;
text-overflow: unset !important;
word-break: break-all;
/*overflow: auto;//Scroll bar*/
/*overflow: inherit; // Move the mouse over to show all */
/*overflow: scroll;//Scroll bar*/
/*overflow: visible;// Move the mouse in to show all */
}
.srctable{
word-wrap:break-word;
}
</style>
"columns": [
{"data": "tag", "bSortable": true},
{"data": "msg", "bSortable": false,class:"msgtable"}, //Mouse removal, replace the content beyond the table width with ..., move the mouse in to display all content
{"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) { //Only display a certain part of the content specified in the table
var subdata=data;
if(data.length>30){
subdata = data.substr(data.lastIndexOf(".") + 1);
}
return "<a title='"+data+"' href='javascript:;'>"+subdata+"</a>";
},
"targets": 2
}