Mohammed Shafeek Mohammed Shafeek - 7 months ago 17
Javascript Question

How can we initiate another jQuery plugin inside jQuery Datatable call results instead of page ready function?

For my web application, iam using jQuery datatable with ajax to fetch data from database.Actually 'icheck' is initiated in jQuery page ready function.What the problem is after calling datatable or any filter or search happens in datatable, getting data correctly and icheck check boxes are showing as normal check boxes.
How can i recall the icheck plugin call inside datatable call.My Code is as follows

<table id="viewcat" class="table table-bordered table-striped mar-bottom0 mydatatable">
<thead>
<tr>
<th style="width: 9%"><input type="checkbox" class="minimal" id="bulkDelete" /> <button type="submit" id="deleteTriger" name="submit" class="btn btn-primary btn-xs hor-align" value="Delete Selected" >Delete</button></th>
<th style="width: 2%">Sl.no</th>
<th style="width: 15%">Category Name</th>
<th style="width: 20%">Reference Links</th>
<th style="width: 25%">Image</th>
<th style="width: 15%"></th>
<th style="width: 10%"></th>
</tr>
</thead>
</table>


Script is as follows

<script>
$(function (){
$("#viewcat").DataTable({
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:nth-child(2)", nRow).append(aData[7]);
return nRow;
},
"processing": true,
"serverSide": true,
"order": [ 2, "asc" ],
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0, 1, 4, 5 ,6] } ],
"ajax":{
url :"maincategory/viewdata.php", // json datasource
type: "post",
error: function(){
$(".viewcat-error").html("");
$("#viewcat").append('<tbody class="viewcat-error"><tr><th colspan="7">No data found in the server</th></tr></tbody>');
$("#viewcat_processing").css("display","none");
}
}
});

});
</script>


Please help me to fix it..

Answer

Oh..Finally i found it..This may help others..One api function instead of ajax success is already there inside datatable plugin..That is "fnDrawCallback".

<script>
  $(function (){    
    $("#viewcat").DataTable({
      "fnRowCallback" : function(nRow, aData, iDisplayIndex){               
               $("td:nth-child(2)", nRow).append(aData[7]);
               return nRow;
            },
      "fnDrawCallback": function( oSettings ){
              $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
                  checkboxClass: 'icheckbox_minimal-blue',
                  radioClass: 'iradio_minimal-blue'
                });},      
      "processing": true,
      "serverSide": true,
      "order": [ 2, "asc" ],
      "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0, 1, 4, 5 ,6] } ],
      "ajax":{
          url :"maincategory/viewdata.php", // json datasource
          type: "post",        
          error: function(){  
          $(".viewcat-error").html("");
          $("#viewcat").append('<tbody class="viewcat-error"><tr><th colspan="7">No data found in the server</th></tr></tbody>');
          $("#viewcat_processing").css("display","none");          
          }
      }
    });

  });
</script>