Jquery DataTable search not working if cell contained html

Question

I am using jquery datatable version 1.10.I have four cell in my table. i have enabled search on first cell only and disabled on others.My first cell contains HTML (xyz),Now if i search anything in search input box result is not coming properly. please see the screen shot also

Below is my code

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

I also put following code also

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

But no luck Thanks

Answer 1

Although DataTables detects data type automatically, you can use type: 'html' to explicitly set HTML data type for the first column (targets: 0).

Also if you want to prevent search from using all columns except first, you need to target all these columns (targets: [1,2,3]) and disable searching with searchable option (searchable: false).

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

See example below for demonstration.

$(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>