jQuery Datatable with Jeditable not working for serverside processing

StackOverflow https://stackoverflow.com/questions/20779643

문제

I am creating a Node.js app and using jQuery data-tables. I want my table fields to be editable hence also using Jeditable for the same.

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
});

Here my table is generated on the fly using data-table server-side processing. None of the <td> become editable. But the divs with .edit class are editable which were part of the static html file. What am I doing wrong here?

My html file source

<!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>

I am not seeing any data rendered in the source code i.e. there are multiple rows of data in the page when displayed but they are not in HTML source of the page. Has it got something to do with the editable event not getting attached?

도움이 되었습니까?

해결책

Apparently it was due to the elements loading dynamically that the Jeditable was not able to attach it's event to them. Fixed it with using callback on ajax complete for jQuery Data-Table.

"fnDrawCallback" : function() {
        $('td').editable('/ajax_url_here');
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top