var tabla=null;

var tabla='tabla_roles';

$(document).ready(function() {
    muestrapermisos();
$('#tabla_roles').DataTable({
  "order": [0, "asc"],
  "aLengthMenu": [[50, -1],[50, "All"]],
    keys: true,
    paging: true,
    language:{
        search:"Buscar:",
        paginate: {
            "next":       "Siguente",
            "previous":   "Anterior"
        }
    }
 });
});
function muestrapermisos() {
   $.ajax({
    data: "&_token={{ csrf_token() }}&tipo_id="+$('#tipo_id').val()+"&rol_id={{isset($datos['id'])?$datos['id']:'0'}}",
    type: "POST",
    url: "{{URL::to('/')}}/base/configuracion/roles/permisos.json",
    success: function(data){
        var html = '';
        var tdatos=Math.round(data.total,0);
        var datos = data.datos;
        var no=((Math.round(tdatos,2)/tdatos) >= 0)?Math.round(tdatos,0):Math.round(tdatos,0);
        $('#'+tabla+"_npage").html(no+1);
        if(datos.length > 0){
                var nx=$('#'+tabla+'_paginaactual').val();
                n=(nx==1)?nx:(((nx*($('#'+tabla+'_rows').val()))+1)-($('#'+tabla+'_rows').val()));
                $.each(datos, function(i,item){
                    html += '<tr align="center">'
                            html += '<td><i class="'+item.app_icono+'"></i> '+item.aplicacion_nombre+'</td>'
                            html += '<td><i class="'+item.cat_icono+'"></i> '+item.categoria_nombre+'</td>'
                html += '<td><i class="'+item.icono+'"></i> '+item.nombre+'</td>'
                html += '<td ><input type="checkbox" onclick="actualizadatos('+item.id+',1)"  id="l'+item.id+'" '+((item.leer==1)?'checked="checked"':'')+' /><label for="l'+item.leer+'"></td>'
                html += '<td ><input type="checkbox" onclick="actualizadatos('+item.id+',2)" id="e'+item.id+'" '+((item.escribir==1)?'checked="checked"':'')+' /><label for="l'+item.escribir+'"></td>'
                html += '<td ><input type="checkbox" onclick="actualizadatos('+item.id+',3)"  id="m'+item.id+'" '+((item.modificar==1)?'checked="checked"':'')+' /><label for="l'+item.modificar+'"></td>'
                            html += '<td ><input type="checkbox" onclick="actualizadatos('+item.id+',4)"  id="i'+item.id+'" '+((item.eliminar==1)?'checked="checked"':'')+' /><label for="l'+item.eliminar+'"></td>'
                html += '</tr>';
                  n++;
          });
        }
        if(html == '') html = '<tr><td colspan="7" align="center">No se encontraron registros..</td></tr>';
        $("#"+tabla+" tbody" ).html(html);
    }
  });
}`

<div class="table-responsive">
                    <table id="tabla_roles" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
                      <thead>
                        <tr class='bg-blue'>
                          <th>Aplicación</th>
                          <th>Categoria</th>
                          <th>Modulo</th>
                          <th >Leer</th>
                          <th >Escribir</th>
                          <th>Crear</th>
                          <th>Eliminar</th>
                        </tr>
                      </thead>
                      <tbody id="body_roles">

                      </tbody>
                      <tfoot>
                        <tr class='bg-blue'>
                          <th>Aplicación</th>
                          <th>Categoria</th>
                          <th>Modulo</th>
                          <th >Leer</th>
                          <th >Escribir</th>
                          <th>Crear</th>
                          <th>Eliminar</th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>