<script type="text/javascript">

            $(document).ready(function () {

                var codigoCiclo = $("#<%=ddlCiclo.ClientID%>").val();
                var oTable = $("#grid").dataTable({
                        "oLanguage": {
                            "sProcessing": "Procesando...",
                            "sLengthMenu": "Mostrar _MENU_ registros",
                            "sZeroRecords": "No se encontraron resultados",
                            "sEmptyTable": "Ningún dato disponible en esta tabla",
                            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                            "sInfoPostFix": "",
                            "sSearch": "Buscar:",
                            "sUrl": "",
                            "sInfoThousands": ",",
                            "sLoadingRecords": "Cargando...",
                            "oPaginate": {
                                "sFirst": "Primero",
                                "sLast": "Último",
                                "sNext": "Siguiente",
                                "sPrevious": "Anterior"
                            },
                            "oAria": {
                                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                            }
                        },
                        "bFilter": false,
                        "aLengthMenu": [5, 10, 15],
                        "sAjaxSource": "MantenedorInstrumentos.aspx/ObtenerGrilla",
                        "fnServerData": function (sSource, aoData, fnCallback) {
                            var jsonAOData = JSON.stringify(aoData);
                            $.ajax({
                                crossDomain: true,
                                type: "POST",
                                url: sSource,
                                data: "{'jsonAOData':'" + jsonAOData + "', 'codigoCiclo':'" + codigoCiclo + "'}",
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                success: function (data) {
                                    fnCallback($.parseJSON(data.d));
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    alert("Status: " + XMLHttpRequest.status + "\r\n" + textStatus + "\r\n" + errorThrown);
                                }
                            });
                        },
                        "bServerSide": true,
                        "bPaginate": true,
                        "aoColumns": [
                        {
                            "sTitle": "Detalle",
                            "sClass": "control center",
                            "sDefaultContent": '<img class="expandir" src="http://i.imgur.com/SD7Dz.png">',
                            "mData": null
                        },
                            { "sTitle": "Codigo Instrumento", "mData": "CodigoInstrumento" },
                            { "sTitle": "Ciclo", "mData": "NombreCiclo" }
                        ]
                });

                $(".expandir").on("click", function () {
                    var nTr = $(this).parents('tr')[0];
                    var nTds = this;

                    if (oTable.fnIsOpen(nTr)) {
                        /* This row is already open - close it */
                        this.src = "http://i.imgur.com/SD7Dz.png";
                        oTable.fnClose(nTr);
                    }
                    else {
                        /* Open this row */
                        var rowIndex = oTable.fnGetPosition($(nTds).closest('tr')[0]);
                        var detailsRowData = newRowData[rowIndex].details;

                        this.src = "http://i.imgur.com/d4ICC.png";
                        oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');
                        oInnerTable = $("#CompetenciasDetalles" + iTableCounter).dataTable({
                            //"bJQueryUI": true,
                            "bFilter": false,
                            "aaData": detailsRowData,
                            "bSort": true, // disables sorting
                            "aoColumns": [
                            { "mDataProp": "pic" },
                            { "mDataProp": "name" },
                            { "mDataProp": "team" },
                            { "mDataProp": "server" }
                            ],
                            "bPaginate": false,
                            "oLanguage": {
                                "sInfo": "_TOTAL_ entries"
                            },
                            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                                var imgLink = aData['pic'];
                                var imgTag = '<img width="100px" src="' + imgLink + '"/>';
                                $('td:eq(0)', nRow).html(imgTag);
                                return nRow;
                            }
                        });
                        iTableCounter = iTableCounter + 1;
                    }
                });

            });


        </script>