@model string

<div class="grid-container">
    <table id="indexersGrid" class="dataTablesGrid hidden-grid no-details">
        <thead>
            <tr>
                <th>ID</th>
                <th>Enable</th>
                <th>Index Provider Type</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function() {         
            $('#indexersGrid').removeClass('hidden-grid');

            oTable = $('.dataTablesGrid').dataTable({
            "bShowAll": false,
            "aaData": @Html.Raw(Model),
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "bSort": false,
            "bInfo": false,
            "bAutoWidth": false,
            "iDisplayLength": 20,
            "sPaginationType": "four_button",
            "aoColumns": [
                            { sWidth: '100px', "mDataProp": "Id"}, //Id
                            { sWidth: '100px', "mDataProp": "Enable"}, //Enable
                            { sWidth: 'autopx', "mDataProp": "IndexProviderType" }, //Type
                            { sWidth: '150px', "mDataProp": "Name" } //Name
            ]
            });
        });
    </script>
}