DataTables

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>MenuName</th>
            <th>CanAdd</th>
        </tr>
    </thead>

</table>

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
        data: [{"MenuName":"Roles","CanAdd":true},{"MenuName":"Menu","CanAdd":true},{"MenuName":"ServiceTax","CanAdd":false}],
        columns: [
            { "data": "MenuName" },
            { "data": "CanAdd" }               

        ],            
        "bProcessing": true,
        "aoColumnDefs": [{
            "targets": 1,
            "bSortable": false,
            "mRender": function (data, type, full, meta) {
                return '<input type="checkbox" class="minimal"'+ (data ? ' checked' : '') +'/>';
            }
        }]
    });        
});