Question

我正在使用jquery datatable版本1.10。我的表中有四个单元格。我已启用仅在第一个单元格上搜索并在其他单元格上禁用。我的第一个单元格包含HTML（xyz），现在，如果我在搜索输入框中搜索任何内容，则结果不正确。请看屏幕截图 enter image description here

以下是我的代码

<script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#example1').dataTable({

            } );




        });
        </script>

<table border="1" id="example1">
   <thead>
      <tr role="row">
         <th >Name</th>
         <th>Created At</th>
         <th >Description</th>
         <th >Created By</th>

      </tr>
   </thead>
   <tbody role="alert" aria-live="polite" aria-relevant="all">
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ae181144aef232f7a284d0" target="_self">zzzzz</a></td>
         <td class=" sorting_1">Jul  21 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>

      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ae19e044aef232f7a284d3" target="_self">2col pivot</a></td>
         <td class=" sorting_1">Jul  21 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>

      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ae1a4244aef232f7a284db" target="_self">3 col pivot</a></td>
         <td class=" sorting_1">Jul  21 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>

      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ace44c44aec915dddc0f34" target="_self">ggg</a></td>
         <td class=" sorting_1">Jul  20 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>

      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a8074544aeb1dc73e06656" target="_self">tablenotnull</a></td>
         <td class=" sorting_1">Jul  17 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>

      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a812cd44ae6c88d6b051fc" target="_self">district</a></td>
         <td class=" sorting_1">Jul  17 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>
      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a8b36f44ae56fb627bbd60" target="_self">TCSV1</a></td>
         <td class=" sorting_1">Jul  17 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>
      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a8b4b544ae56fb627bbd6d" target="_self">TCSV2</a></td>
         <td class=" sorting_1">Jul  17 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>

      </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a787c244aebc65a6360063" target="_self">Bar2</a></td>
         <td class=" sorting_1">Jul  16 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>
       </tr>
      <tr>
         <td class=" "><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a7bde244aebc65a636010f" target="_self">Table Report23</a></td>
         <td class=" sorting_1">Jul  16 , 2015</td>
         <td class=" "></td>
         <td class=" ">alok.ranjan</td>
      </tr>
   </tbody>
</table>

我还提出以下代码

"aoColumnDefs": [
      { "sType": "html", ... } // column[0] settings
    ]

但没有运气感谢

Answer 1

虽然DataTables会自动检测数据类型，但您可以使用type: 'html'为第一列（targets: 0）显式设置HTML数据类型。

此外，如果您希望阻止搜索使用除第一列以外的所有列，则需要定位所有这些列（targets: [1,2,3]）并使用searchable选项（searchable: false）禁用搜索。< / p>

$('#example1').DataTable({
   columnDefs: [
      { targets: 0, type: 'html' },
      { targets: [1,2,3], searchable: false }
   ]
});

请参阅下面的示例进行演示。

$(document).ready( function () {
  var table = $('#example1').DataTable({
     columnDefs: [
       { targets: 0, type: 'html' },
       { targets: [1,2,3], searchable: false }
     ]
  });
} );

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example1" class="display">
   <thead>
      <tr role="row">
         <th >Name</th>
         <th>Created At</th>
         <th >Description</th>
         <th >Created By</th>

      </tr>
   </thead>
   <tbody>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ae181144aef232f7a284d0" target="_self">zzzzz</a></td>
         <td>Jul  21 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>

      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ae19e044aef232f7a284d3" target="_self">2col pivot</a></td>
         <td>Jul  21 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>

      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ae1a4244aef232f7a284db" target="_self">3 col pivot</a></td>
         <td>Jul  21 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>

      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55ace44c44aec915dddc0f34" target="_self">ggg</a></td>
         <td>Jul  20 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>

      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a8074544aeb1dc73e06656" target="_self">tablenotnull</a></td>
         <td>Jul  17 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>

      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a812cd44ae6c88d6b051fc" target="_self">district</a></td>
         <td>Jul  17 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>
      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a8b36f44ae56fb627bbd60" target="_self">TCSV1</a></td>
         <td>Jul  17 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>
      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a8b4b544ae56fb627bbd6d" target="_self">TCSV2</a></td>
         <td>Jul  17 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>

      </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a787c244aebc65a6360063" target="_self">Bar2</a></td>
         <td>Jul  16 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>
       </tr>
      <tr>
         <td><a href="#/projects/5549b1a744ae7a25fc05ed12/datasets/55a508f744ae390fe59ca0c7/reports/55a7bde244aebc65a636010f" target="_self">Table Report23</a></td>
         <td>Jul  16 , 2015</td>
         <td></td>
         <td>alok.ranjan</td>
      </tr>
   </tbody>
</table>
  </body>
</html>

如果单元格包含html，则Jquery DataTable搜索不起作用

1 个答案: