首页 > 解决方案 > 如何在数据表单元格上显示工具提示以及如何在工具提示中以表格格式填充数据?

问题描述

下面是我的数据表创建代码。在“显示详细信息”列上,我需要显示一个工具提示。我在下面写了那个单元格,但我面临以下两个问题。

  1. 渲染函数的值超过了我的单元格的值。因此,“显示详细信息”将被渲染函数的值所取代。
  2. 我从 ajaxSource 获得的值,我需要在工具提示中以表格格式显示。下面是我的代码:

代码

function testDataTable() {

             var columnIndex=$('#columnIndex').val();

             var sortBy=$('#sortBy').val();

             var resultPerPage=$('#resultPerPage').val();

          if(columnIndex=='' || sortBy==''){
                  resultPerPage=20;
                  columnIndex=0;
                  sortBy="desc";
              }

            testDataTable= $('#testDataTable').dataTable({
                "bProcesing" : true,
                "bServerSide" : true,
                "sort" : "position",
                "destroy" : true,
                "processing" : true,
                "bFilter" : false,
                "bLenthChange" : false,
                "iDisplayLength" : 4,
                "sAjaxSource" : "getRulesDetails.act",
                "order" : [ [ columnIndex, sortBy ] ],
                "pageLength" : Number(resultPerPage),
                "columnDefs": [
                                { "orderable": false, "targets":[3, 4] }
                            ],
                            "aoColumns" : [
                                           {
                                               "mData" : "crId"                                    
                                           },
                                           {
                                                "mData" : "crNo"

                                           }, 
                                           {
                                               "mData" : "sbNo"

                                           },
                                           {
                                               "mData" : "matchType"

                                           },
                                           {
                                               "mData" : null,
                                               "defaultContent": 'Show Details',
                                               "render": function (data, type, full, meta) {
                                                    return '<span data-toggle="tooltip" title="Testing"></span>';
                                                }
                                           }

                       ],
}

} );
            }

标签: datatables

解决方案


推荐阅读