如果数据表的值为空如何隐藏工具提示

问题描述 投票:0回答:0

我正在使用带有工具提示的数据表。我正在使用隐藏列来显示工具提示。它工作正常,但它在表格的每个单元格上显示工具提示。如果单元格值为空,是否可以隐藏工具提示。请在此处查看我的示例 - https://live.datatables.net/lerapaho/5/edit

在我的示例中,第一行不应显示有关年龄和某事列的工具提示,第二行不应显示有关开始日期和薪水的工具提示。任何帮助/建议表示赞赏。谢谢。

$(document).ready(function() {

  // Just assign to the global table variable
  // Nothing else is changed in here
  table = $('#example').DataTable({
    paging: false,
    scrollX: true,
    scrollCollapse: true,
    lengthChange: false,
    searching: true,
    ordering: false,

    fixedColumns: {
      left: 1
    },
    columnDefs: [
            
            {
                "targets": [2],
                "visible": false,
                "searchable": true            }
        ],
    rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {
      $(row).attr('title', data[2]);
    },
    initComplete: function() {
      $.fn.dataTable.ext.search.push(
        function(settings, searchData, index, rowData, counter) {
          // Don't display rows if nothing is checked
          if (filtered.length === 0) {
            return true;
          } else if (filtered.includes(searchData[15])) {
            return true;
          }
          return false;
        }
      );
    }
  });
  /* Nothing in here was changed */
  $('.filter').on('change', function() {
    var val = $(this).val();
    var checked = $(this).prop('checked');
    var index = filtered.indexOf(val);

    if (checked && index === -1) {
      filtered.push(val);
    } else if (!checked && index > -1) {
      filtered.splice(index, 2);
    }
    table.draw();
  });
});
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>

  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
  <th>&#160;</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>something</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td><p>System: Architectghhghjjkjukjkj<p></td>
            <td>Edinburgh</td>
            <td></td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td></td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td><p>Director: fgghghjhjhjhkjkj<p></td>
            <td>Edinburgh</td>
            <td>45</td>
            <td></td>
            <td></td>
            <td>Director:</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td><p>Technical Authorjkjkjk fdfd h gjjjhjhk<p></td>
            <td>San Francisco</td>
            <td></td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td></td>
          </tr>
          
            
          </tr></tbody></table>
</div>

javascript html datatables
© www.soinside.com 2019 - 2024. All rights reserved.