Problemas com ordens de script

[Erisson Costa01 0]

Olá amigos, sou novo no Fórum e esse é meu primeiro post(Hello Word).

Bem, antes de tudo. Estou desenvolvendo um projeto SPA(Single Page Applications) que consiste em todo o aplicativo em uma única página. Sei da existência de Frameworks que gerenciam isso como AnjularJS e outras, porém resolvi fazer tudo na mão(por não querer estudar uma nova tecnologia).

Vamos ao problema.
Criei um método que carrega meus arquivos externos para a index.html

function carregaPaginas() {
    //Carega todas as paginas no index
    $('.pagina').each(function (i) {
        console.log("inicio: " + i);        
        $(this).load('templates/' + (this.id) + '.html');
        console.log("fim: " + i);
    });   
}

O método funciona e até ai tudo bem. Ele faz um loop pela class .pagina e carrega o fragmento de código para dentro da section.

<section id="ListaManutencao" class="pagina"></section>
<section id="Leituras" class="pagina"></section>
<section id="PermissoesUsuarios" class="pagina"></section>
<section id="LogSistema" class="pagina"></section> 

O problema está quando tento inicializar alguns pluguis de terceiros. Como o famoso DataTable por exemplo.

$('#DataTable').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false
});

O código é executado porém não faz efeito. Percebi que não inicia pq o fragmento do código que contem o ('#datatable') ainda não existe na página. Então busquei muitas formas de inicializar os componentes apos a execução do carregaPaginas() (que carrega toda a página). Todas as tentativas não foram bem sucedida, já estou a dias com isso. E para não ficar parado. Criei um botão que inicia meus componentes . então apos o carregamento da página eu manualmente aperto o botão.

 

segue o código atual:

(function ($) {
    $(function () {
        console.log("abrindo metodo carregapaginas");
        carregaPaginas();
        codigo.execulta();
    });
    var codigo = {
        execulta: function () {

            console.log("abrindo metodo principal");
            
            //abri a index
            abrePagina('PermissoesUsuarios', 'Lista de manutenção');            

            sleep(2000);

            console.log("ligando");
            ligaComponetes();
        }
    };
})(jQuery);

Se alguém já passou por algo parecido ou conhece um meio mais satisfatório de resolver esse problema. ME AJUDE... :D

[junior.vieira 16]

O datatable como o nome já diz, exibe dados em uma tabela personalizada, mas para isso você deve ter a tabela no html, <table id="mytable" class="display" cellspacing="0" cellpadding="0" border="0"> junto com seus <th><tr> e <td>

além de precisar do jquery.js, jquery-datatable.js e jquery.dataTables.css.