哈哈jquery datatable 如何实现鼠标移入显示完整数据 [问题点数：40分，无满意结帖，结帖人x18094]

JSP代码:

 
             <!-- 表格区域 --> 
            
             <div  
             class 
             = 
             "table-responsive"  
             style= 
             "border:1px solid  #ccc;" 
             > 
            
             <table id= 
             "t_table"  
             class 
             = 
             "table table-striped" 
             > 
            
             <thead> 
            
             <tr> 
            
             <th>姓名</th> 
            
             <th>性别</th> 
            
             <th>身份证号</th> 
            
             <th>住址</th> 
            
             <th>联系方式</th> 
            
             <th>主要事迹</th> 
            
             <th>操作栏</th> 
            
             </tr> 
            
             </thead> 
            
             <tbody id= 
             "message_body"  
             /> 
            
             </table> 
            
             </div>

JS代码：

 
             $.ajax({ 
            
             url :  
             "/mypro/Test.action" 
             , 
            
             cache :  
             false 
             , 
            
             dataType :  
             "json" 
             , 
            
             data :{ 
             "fn"  
             : fn}, 
            
             success : function(data){ 
            
             var t_table = $( 
             '#t_table' 
             ); 
            
             t_table.dataTable({ 
            
             bLengthChange:  
             false 
             , 
             //是否显示“每页几条” 
            
             destroy :  
             true 
             , 
            
             data : data.list, 
            
             columns : [ { 
            
             "data"  
             :  
             "t_name" 
            
             }, { 
            
             "data"  
             :  
             "t_sex" 
            
             }, { 
            
             "data"  
             :  
             "t_identify" 
            
             }, { 
            
             "data"  
             :  
             "t_addr" 
            
             }, { 
            
             "data"  
             :  
             "t_phone" 
            
             }, { 
            
             "data"  
             :  
             "t_deed" 
            
             }], 
            
             columnDefs: [{ 
            
             "targets" 
             : [ 
             5 
             ], 
            
             "data" 
             :  
             "t_deed" 
             , 
            
             "render" 
             : function(data, type, full) { 
            
             var subdata=data; 
            
             if 
             (data.length> 
             30 
             ){ 
            
             subdata = data.substr( 
             0 
             , 
             30 
             )+ 
             "..." 
             ; 
            
             } 
            
             return   
             subdata; 
            
             } 
            
             }, { 
            
             "targets" 
             : [ 
             6 
             ], 
            
             "data" 
             :  
             "t_unid" 
             , 
            
             "title"  
             :  
             "t_unid" 
             , 
            
             "render" 
             : function(data, type, full) { 
            
             return  
             "<a href='/update?t_unid="  
             + data +  
             "'>修改</a>" 
             ; 
            
             } 
            
             }], 
            
             order : [ [  
             0 
             ,  
             "desc"  
             ] ], 
            
             // scrollX: true, 
            
             language : { 
            
             processing :  
             "正在加载中......" 
             , 
            
             lengthMenu :  
             "每页 _MENU_ 条" 
             , 
            
             zeroRecords :  
             "对不起，查询不到相关数据！" 
             , 
            
             emptyTable :  
             "表中无数据存在！" 
             , 
            
             info :  
             "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录" 
             , 
            
             infoFiltered :  
             "数据表中共为 _MAX_ 条记录" 
             , 
            
             search :  
             "搜索：" 
             ,  
            
             paginate : { 
            
             first :  
             "首页" 
             , 
            
             previous :  
             "上一页" 
             , 
            
             next :  
             "下一页" 
             , 
            
             last :  
             "末页" 
            
             } 
            
             } 
            
             // 多语言配置 
            
             }); 
            
             t_table.row.add([]).draw(); 
            
             }, 
            
             error : function(){ 
            
             alert( 
             "获取数据出现问题！" 
             ); 
            
             } 
            
             });

现在我想实现鼠标移入到表格数据时，悬浮显示完整内容。
如果不用框架，我知道怎么搞，td 加上 title属性就可以了。jquery datatable 插件，我就束手无策了，有大神知道怎么弄吗？

问题点数： 40分

0 0

引用・举报・管理

datatables bootstrap demo下载

CSDN推荐

CSDN今日推荐

x18094

结帖率 87.5%

回复于 2016-11-10 10:05:59 #1 得分：0

 
           columnDefs: [{ 
          
           "targets" 
           : [ 
           0 
           ], 
          
           "data" 
           :  
           "culture_title" 
           , 
          
           "render" 
           : function(data, type, full) { 
          
           return  
           "<a title='" 
           +data+ 
           "' href='/update?t_unid="  
           + data +  
           "'>" 
           +data+ 
           "</a>" 
           ; 
           // 也可以不用a标签，用<span> 
          
           }}

我知道了，自己想出来的办法，哈哈~~~分享一下
还有，如上，我顺便也知道了jquery datatable 怎么弄表格超链接，哎哟，真是天才~~~

哈哈jquery datatable 如何实现鼠标移入显示完整数据 [问题点数：40分，无满意结帖，结帖人x18094]

猜你喜欢