X-редактируемый с DataTables выполнить действие, когда значение изменилось

я создал следующий PHP файл immitate в AJAX запроса:X-редактируемый с DataTables выполнить действие, когда значение изменилось

<?php 

$data=[ 
"key0"=>["item1"=>1,"item2"=>2], 
"key1"=>["item1"=>11,"item2"=>21], 
"key3"=>["item1"=>101,"item2"=>221], 
]; 

header('Content-Type: application/json'); 
echo json_encode($data);

И я создал следующий HTML с JavaScript:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"/> 
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script 
       src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
       integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
       crossorigin="anonymous"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script> 

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

    var datatable=null; 

    var initDatatable=function(){ 

    if(datatable===null){ 
     datatable=$("#t1").DataTable({ 
      createdRow:function(row,data,dataIndex){ 

       var item=data[data.length-1]; 
       var editableItem=document.createElement("a"); 
       $(editableItem).text(item); 

       var lastChild=$(row).children().last(); 
       lastChild.text(""); 
       lastChild.append(editableItem); 

       $(editableItem).editable(function(data){ 
        console.log("Hello"); 
       }); 
      } 
     }); 

    } else { 
     datatable.clear(); 
    } 
    } 

    $(document).ready(function(){ 
     $.ajax({ 
     method:"GET", 
     data:{}, 
     url:"api.php", 
     success:function(data){ 
      initDatatable(); 
      Object.keys(data).forEach(function(key,index){ 
      datatable.row.add([key,data[key]['item1'],data[key]['item2']]); 
      }); 
      datatable.draw(false); 
     } 
     }) 
    }) 
    </script> 
</head> 
<body> 
    <table id="t1"> 
    <thead> 
     <tr> 
     <th>Column 1</th> 
     <th>Columnt 2</th> 
     <th>Column 3</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
    </table> 
</body> 
</html>

Что я пытаюсь сделать, это когда я изменяю значение в последней таблице столбца, чтобы напечатать на консоли слово «Hello». Как видно из:

$(editableItem).editable(function(data){ 
     console.log("Hello"); 
    });

Но по какой-то причине я не мог заставить его работать, и я не могу понять, почему. Вы можете мне помочь?

источник

2017-02-08 Dimitoriosu Deshirasu

На createdRow обратного вызова заменить:

$(editableItem).editable(function(data){ 
     console.log("Hello"); 
    });

С:

$(editableItem).editable({ 
    mode: "inline"//OPtional PArameter 
}); 

$(editableItem).on('save',function(e,params){ 
    console.log("Hello); 
    // For cleaner code use external function. 
})

источник

2017-02-08 08:27:55

X-редактируемый с DataTables выполнить действие, когда значение изменилось

ответ

Смежные вопросы