dataTable не работает с дочерней строкой без Ajax

Question

Я пытаюсь создать дочернюю строку без Ajax в dataTable, я вижу значок (+), но ничего не происходит, когда я нажимаю на него. Кто-нибудь может мне помочь? Я пробовал несколько способов, но безуспешно. И я не знаю, что еще я должен проверить. Я пытался следовать примеру на скрипке http://jsfiddle.net/twicebishop/h94m5xsw/2/, но что бы я ни делал, ничего не происходит, когда я нажимаю кнопку (+). Заранее спасибо!

CSS:

td.detail-control{
    background:url("../Images/dataTable/detail_open.png") no-repeat center center;
    cursor:pointer;
}
tr.show-detail td.detail-control{
    background:url("../Images/dataTable/detail_close.png") no-repeat center center;
}

HTML:

<table id="tLista" class="table table-hover mb-0">
    <thead>
        <tr>
            <th align="left">CFOP</th>
            <th align="left"></th>
            <th align="left">Valor Cont&aacute;bil</th>
            <th align="left">Base de C&aacute;lculo</th>
            <th align="left">Imposto</th>
            <th align="left">Outras</th>
            <th align="left">Petr&oacute;leo e Energia</th>
            <th align="left">Outros Impostos</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="Teste">
            <td align="left"><?php echo substr($rCR10["CFOP"],0,1).'.'.substr($rCR10["CFOP"],1,3); ?></td>
            <td align="center" class="detail-control"></td>
            <td align="right"><?php echo number_format($nValorContabil,2,",","."); ?></td>
            <td align="right"><?php echo number_format($nBaseCalculo,2,",","."); ?></td>
            <td align="right"><?php echo number_format($nImposto,2,",","."); ?></td>
            <td align="right"><?php echo number_format($nOutras,2,",","."); ?></td>
            <td align="right"><?php echo number_format($nPetroleoEnergia,2,",","."); ?></td>
            <td align="right"><?php echo number_format($nOutrosImpostos,2,",","."); ?></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th class="total-title" colspan="2">Total</th>
            <th class="total-amount"><?php echo number_format($nValorContabil_E,2,",","."); ?></th>
            <th class="total-amount"><?php echo number_format($nBaseCalculo_E,2,",","."); ?></th>
            <th class="total-amount"><?php echo number_format($nImposto_E,2,",","."); ?></th>
            <th class="total-amount"><?php echo number_format($nIsentasNaoTrib_E,2,",","."); ?></th>
            <th class="total-amount"><?php echo number_format($nOutras_E,2,",","."); ?></th>
            <th class="total-amount"><?php echo number_format($nImpRetSubstitutoST_E,2,",","."); ?></th>
        </tr>
    </tfoot>
</table>
<script>
    /*-- ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** ** --*/
    // >>>>> DATATABLE
    function fViewTable(sReturn){
        return '<div id="dRow" style="background-color:#FF0000;display:show;">Hidden Value: '+sReturn+'</div>';
    }
    $(document).ready(function(){
        var tLista = $('#tLista').dataTable({
            "columnDefs": [{
                "orderable":    false,
                "targets":      [1,2,3,4,5,6,7]
            }],
            "info":         true,
            "fixedHeader":  true,
            "order":        [[ 0,"asc"]],
            "ordering":     true,
            "pageLength":   10,
            "paging":       true,
            "select":       true
        });
        $('#tLista').on('click','td.detail-control',function(){
            var tr = $(this).closest('tr');
            var row = tLista.row(tr);
            if(row.child.isShown()){
                row.child.hide();
                tr.removeClass('show-detail');
            }else{
                row.child(fViewTable(tr.data('child-value'))).show();
                tr.addClass('show-detail');
            }
        });
    });
</script>