jquery datatable загруженный через ajax не зарегистрирован как плагин jquery

Question

Я загружаю некоторый HTML через jquery ajax, и как часть этого ответа есть ссылка на скрипт для jquery Datatables. Я вижу, что загрузка сценария прекрасна, но плагин не зарегистрирован в jQuery (который был частью начальной загрузки страницы). Поэтому, когда я вызываю $ (container) .DataTable (...), он говорит, что функция не определена. Тот же код работает, когда datatable загружается нормально, а не через ajax. По какой-то причине его динамическая загрузка приводит к этой ошибке. Любые указания на то, что может вызвать это?

Answer 1

Проблема заключается в том, что теги не выполняются, когда содержимое вводится на страницу, см. Element.innerHTML - Security considerations.

Простейшим подходом было бы включать файлы CSS/JS DataTables на главной странице и удалять их из вашего содержимого AJAX. Я исключил jQuery, так как вы упомянули, что это часть вашей главной страницы.

<!-- DataTables CSS --> 
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css"> 

<!-- DataTables --> 
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script> 

Другим вариантом было бы динамически загружать DataTables, как показано ниже. Однако вам нужно будет использовать механизм идентификации страницы, чтобы определить по идентификатору страницы, нужна ли ему библиотека DataTables. Кроме того, сценарий ниже будет более сложным, если вам потребуются другие библиотеки в дополнение к DataTables.

$.ajax("/path/to/script.php") 
    .done(function(){ 
     $('head').append(
      $('<link rel="stylesheet" type="text/css" />') 
       .attr('href', '//cdn.datatables.net/1.10.6/css/jquery.dataTables.css') 
     ); 

     $.ajax(
      url: '//cdn.datatables.net/1.10.6/js/jquery.dataTables.js', 
      cache: true, 
      dataType: 'script' 
     ).done(function(){ 
      // DataTables initialization 
     }); 
    });