TypeError: $ (…) .DataTable não é uma função

91

Estou tentando trabalhar com Datatable JS da jQuery para o meu projeto a partir deste link.

Baixei a biblioteca completa da mesma fonte. Todos os exemplos fornecidos no pacote parecem funcionar bem, mas quando tento incorporá-los no meu WebForms, o CSS, JS não funcionam de forma alguma.

Aqui está o que eu fiz: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="myTable" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
               <!-- table body -->
            </tbody>
        </table>
    </div>
    <script src="js/jquery.dataTables.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>
    </form>
</body>
</html>

Minha estrutura de arquivo para JS e CSS em minha solução é a seguinte:

Estrutura de arquivo de JS e CSS na solução

Eu adicionei todas as referências JS e CSS necessárias, conforme mostrado no manual. Ainda assim, a renderização não é a esperada. Não há CSS e nem mesmo o JS funciona.

Também recebo os seguintes erros no console: 

ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function

Eu ainda não limitei nenhum dado dinâmico aqui (como dentro de um repetidor ou algo assim) ainda não está funcionando.

Alguém pode me orientar na direção certa para este problema?

javascript jquery css asp.net datatables Abhishek Ghosh
fonte
Qualquer que seja o código que escrevi, estava perfeitamente bem, mas também recebi o mesmo erro. Após uma longa análise, reiniciei meu PC, pois não reiniciei nos últimos 7 dias. Então, meu código começou a funcionar.
Ashok kumar
@Ashokkumar: provavelmente você teve sorte!
Abhishek Ghosh

Respostas:

134

CAUSA

Pode haver vários motivos para esse erro.

  • Biblioteca jQuery DataTables ausente.
  • A biblioteca jQuery é carregada após jQuery DataTables.
  • Várias versões da biblioteca jQuery são carregadas.

SOLUÇÃO

Incluir apenas uma versão da biblioteca jQuery versão 1.7 ou mais recente antes jQuery DataTables.

Por exemplo:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>

Consulte jQuery DataTables: Erros comuns do console JavaScript para obter mais informações sobre este e outros erros comuns do console.

Gyrocode.com
fonte
46

Isso funcionou para mim. Mas certifique-se de carregar o jquery.js antes do arquivo dataTable.js preferido. Felicidades!

<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>

 <script>$(document).ready(function () {
    $.noConflict();
    var table = $('# your selector').DataTable();
});</script>
Ichorville
fonte
8
A chamada $ .noConflict () no método foi a chave para mim. Obrigado.
jrebs 01 de
37

Recebi este erro porque descobri que referenciei jQuery duas vezes.

A primeira vez: na página mestra ( _Layout.cshtml) na ASP.NET MVC, e depois novamente em uma página atual, então comentei a página mestra.

Se você estiver usando ASP.NET MVC, este trecho pode ajudá-lo

@*@Scripts.Render("~/bundles/jquery")*@//comment this line 
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

e na página atual eu adicionei essas linhas

<script src="~/scripts/jquery-1.10.2.js"></script>

<!-- #region datatables files -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->

Espero que isso ajude você, mesmo que não use ASP.NET MVC

Basheer AL-MOMANI
fonte
Na verdade, eu comentei jquery.min.js em _Layout.cshtml. No entanto, o que realmente funcionou para mim foi colocar @RenderSection ("scripts", required: false) no final, depois de todos os elementos <scripts> </scripts>.
muhammad tayyab 01 de
muito obrigado, sua resposta terminou 4 horas de instalação e reinstalação de datatables jquery! No entanto, tenho uma pergunta: e se eu precisasse de jQuery em _Layout.cshtml e tabelas de dados em myView.cshtml, o que devo fazer já que não mencionar jQuery em myView.cshtml causará "jQuery não está definido"?
Hamza Dahmoun
19

se por algum motivo duas versões do jQuery forem carregadas (o que não é recomendado), chamar a $.noConflict(true)partir da segunda versão retornará as variáveis ​​jQuery com escopo global para as da primeira versão.

Às vezes, pode ser um problema com a versão mais antiga (ou não estável) de arquivos JQuery

Uso da solução $.noConflict();

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
    $('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>
Manoj Patil
fonte
usando jquery com laravel com Blade como meu mecanismo de modelagem ... Surpreendentemente, esta é a única maneira que funcionou para mim - é claro que você conhece desenvolvedores ... Quando funciona, você para de pesquisar!
daniel Warui
noConflict () funcionou para mim. Acho que tinha alguma outra versão do jQuery instalada.
Aaron
10

Aqui está o conjunto completo de JS e CSS necessário para o plug-in da tabela de exportação funcionar perfeitamente.

Espero que economize seu tempo

   <!--Import jQuery before export.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <!--Data Table-->
    <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"  src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>

    <!--Export table buttons-->
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
    <script type="text/javascript"  src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>

<!--Export table button CSS-->

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">

javascript para adicionar botões de exportação na tabela com id = tbl

  $('#tbl').DataTable({
                        dom: 'Bfrtip',
                        buttons: [
                            'copy', 'csv', 'excel', 'pdf', 'print'
                        ]
                    });

Resultado: -

insira a descrição da imagem aqui

Hitesh Sahu
fonte
Consegui fazer isso sem as chamadas de script "botões de tabela de exportação". Coisa boa.
Marcos
7

Pode haver dois motivos para esse erro:

Primeiro

Você está se hospedando jQuery.DataTables.jsantes jquery.jspara que: -

Você precisa carregar jQuery.jsantes de carregarjQuery.DataTables.js

Segundo

Você está usando duas versões de jQuery.jsna mesma página para que: -

Tente usar a versão superior e certifique-se de que ambos os links tenham a mesma versão do jQuery

Tenstormavi
fonte
Um problema potencial para alcançar "TypeError: $ (…) .DataTable não é uma função", uma vez que o Datatables começou a fornecer um criador de download escolha seu próprio, é que você seleciona jquery no download, mas também já o possui em sua página.
Wombat
Só para ficar claro - esse erro também vem de OUTRAS fontes. Eu os coloquei na ordem certa e não estava usando dois jQuerys. Apenas no caso de alguma outra pobre alma aparecer ... Quando funciona, o DataTables é maravilhoso, mas é muito difícil para o meu gosto (cerca de uma hora para fazer outra instalação ****** funcionar!
BeNice
3

Honestamente, isso levou horas para consertar isso. Por fim, apenas uma coisa funcionou na reconfirmação da solução fornecida pelo "Basheer AL-MOMANI". Que é apenas colocar declaração

   @RenderSection("scripts", required: false)

dentro do _Layout.cshtmlarquivo após todos os <script></script>elementos e também comentando o script jquery no mesmo arquivo. Em segundo lugar, eu tive que adicionar

 $.noConflict();

dentro da chamada de função jquery em outro arquivo * .cshtml como:

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

        });
muhammad tayyab
fonte
1

Também encontrei este erro. Por alguma razão, eu originalmente codifiquei

var table = $('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

Isso não geraria o erro às vezes e outras vezes sim. Alterando o código para

$('#myTable').DataTable({
    "paging": false,
    "order": [[ 4, "asc" ]]
});

O erro parece ter parado

Mike Volmar
fonte
0

Eu sei que sua compra atrasada pode ajudar alguém

Isso também pode acontecer se você não adicionar $('#myTable').DataTable();dentro dodocument.ready

Então, ao invés disso

$('#myTable').DataTable();

Tente isto

$(document).ready(function() {
    $('#myTable').DataTable();
});
Tech Yogesh
fonte
0

No meu caso, a solução foi excluir os cookies do navegador.

Agath
fonte
0 
// you can get the Jquery's librairies online with adding  those two rows in your page

 <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
Carmel Nkesh
fonte
0

Tendo o mesmo problema no Flask, eu já tinha um template que carregava JQuery, Popper e Bootstrap. Eu estava estendendo esse modelo para outro modelo que estava usando como base para carregar a página que tinha a tabela.

Por algum motivo, no Flask, aparentemente, os arquivos no modelo externo são carregados antes dos arquivos nas tabelas acima na hierarquia (aqueles que você está estendendo), portanto, o JQuery estava carregando antes dos arquivos DataTables que estavam causando o problema.

Tive que criar outro modelo onde executava todas as minhas importações de JS CDNs no mesmo lugar, o que resolveu o problema.

Daniel Herrera
fonte