哈哈jquery datatable 如何实现鼠标移入显示完整数据 [问题点数：40分，无满意结帖，结帖人x18094]_datatables获取数据某一列显示20字符,鼠标悬停显示全部-优快云博客

本文介绍如何使用JSP和JS代码构建一个带有数据表格的网页应用，并通过Ajax从服务器获取JSON数据来填充表格。文章还展示了如何利用jQuery DataTables插件优化表格展示效果，包括限制每页显示的记录数量、按列排序等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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下载

优快云推荐

优快云今日推荐

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>
         
          }}