jQuery Datatable с Jeditable не работает для обработки на стороне сервера

Я создаю приложение Node.js и использую таблицы данных jQuery. Я хочу, чтобы поля моей таблицы были редактируемыми, поэтому я также использую Jeditable для того же.

script.js

$(document).ready(function(){
    $("#example").dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "/my_ajax_url_here",
        "sScrollX": "100%",
        "bScrollCollapse": true,
        "sScrollY":"100%"
    });

    $('.edit').editable('/ajax_url'); //These are static elements on page and are editable as expected
    $('td').editable('/ajax_url'); //These elements are not in source but rendered on page
});

Здесь моя таблица генерируется на лету с использованием серверной обработки таблицы данных. Ни один из ‹td› не становится редактируемым. Но div с классом .edit доступны для редактирования, которые были частью статического html-файла. Что я здесь делаю неправильно?

Мой исходный файл HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Home</title>
      <link rel="stylesheet" href="/stylesheets/style.css">
      <link rel="stylesheet" href="/stylesheets/data_table_bk.css">
      <script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/jquery_datatable.js"></script><script type="text/javascript" src="/js/jquery_jeditable.js"></script>
   </head>
   <body>
      <header>
         <h1>Data Table</h1>
      </header>
      <div class="container">
         <div class="main-content">
            <table id="example">
               <thead>
                  <tr>
                     <th>Name</th>
                     <th>Field1</th>
                     <th>Field2</th>
                  </tr>
               </thead>
               <tbody></tbody>
            </table>
         </div>
      </div>
      <div class="edit">This is editable</div>
      <script type="text/javascript" src="/js/script.js"></script>
   </body>
</html>

Я не вижу никаких данных, отображаемых в исходном коде, т. Е. При отображении на странице есть несколько строк данных, но они не находятся в исходном HTML-коде страницы. Это как-то связано с тем, что редактируемое событие не прикрепляется?


javascript jquery express jeditable jquery-datatables
person Priyadarshi Kunal    schedule 26.12.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

По-видимому, из-за динамической загрузки элементов Jeditable не смог прикрепить к ним свое событие. Исправлено использование обратного вызова для ajax для таблицы данных jQuery.

"fnDrawCallback" : function() {
        $('td').editable('/ajax_url_here');
}
person Priyadarshi Kunal    schedule 26.12.2013