0

테이블에 jEditable 플러그인을 사용하고 있습니다. 그것은 잘 작동하지만 모든 셀을 편집하는 동안 내용이 사라집니다 (단지 값이없는 일반 입력 텍스트 상자가 표시됨). 편집 및 입력을 완료하면 완전한 텍스트 (기존 텍스트 + 편집 된 텍스트)가 표시됩니다.jEditable : 텍스트 편집 중 셀 내용을 표시하지 않습니다.

<script type="text/javascript" src="media/js/jquery.min.js"></script> 
<script src="media/js/jquery.dataTables.js"></script> 
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.min.js"></script> 
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.css"> 
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.min.css"> 
<link href="media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<script src="extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script> 
<link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="css/resultTable.css"> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script> 



<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 

<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<script> 
$(document).ready(function() { 
     $('#dbResultsTable').DataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers" , 
     "paging": true, 
     "ordering" : true, 
     "scrollY":false, 
     "autoWidth": false, 
     "info":  true , 
     "scrollX": "100%" , 
     "sScrollXInner": "110%", 
     "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]], 
     columnDefs: [ 
     { "type": "html-string", "targets": 1 }, 
     { "type": "html-string", "targets": 2 }, 
     { "type": "html-string", "targets": 3 }, 
     { "type": "html-string", "targets": 4 }, 
     { "type": "html-string", "targets": 5 } 

     ], 
     "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' 
     } 
    ); 

     }); 


</script> 

<script> 
$(document).ready(function() { /* Init DataTables */ 
    var oTable = $('#dbResultsTable').dataTable(); 

    var theCallback = function(v, s) { 
     return v; 
    }; 
    $(oTable).find('td').editable(theCallback, { 

     "callback": function(sValue, y) { 
      oTable.fnUpdate(sValue); 
     }, 
    }); 
}); 
</script> 
<style> 
table { table-layout: auto; } 
table { 
    white-space: nowrap; 
} 
</style> 
<style type="text/css"> 
     td{ 
     text-align:center; 
     } 
     </style> 
</head> 

답변

0

그것은 <TD></TD> 태그가 이미 있었지만 인해 원치 않는 추가 캐릭터의 보이지 않는 줄 바꿈 characher 및 공백 문자 .DATA을 많이 가지고 있었다 밝혀졌다 - 여기에 코드입니다. 누군가가 도움이되기를 바랍니다.

관련 문제