@{
    ViewBag.Title = "IndexExample";
}

<script type="text/javascript">
    $(function () {
        $("#example").dataTable({
            "bServerSide": true,
            "bLengthChange": false, // don't show dropdown for #items per page
            "sAjaxSource": '@Url.Action("List")',
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    dataType: 'json',
                    type: "POST",
                    url: sSource,
                    data: aoData,
                    success: fnCallback,
                    error: function (jqXHR, textStatus, errorThrown) { alert('Error getting list of beers:' + errorThrown) }
                })
            },
            "bProcessing": false, // don't want to use the default progress indicator at this time
            "aoColumnDefs": [
                    { "sName": "ID_CONFIG_VARIABLE", "aTargets": [0], "mDataProp": "ID_CONFIG_VARIABLE" },
                    { "sName": "NOMBRE_VARIABLE", "aTargets": [1], "mDataProp": "NOMBRE_VARIABLE" }
                ]
        });
    });
</script>

@*<script type="text/javascript">
    $(function () {
        $("#example").dataTable();
    });*@

<table id="example" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
	<thead>
		<tr>
			<th>ID_CONFIG_VARIABLE</th>
			<th>NOMBRE_VARIABLE</th>
		</tr>
	</thead>
</table>