JQuery DataTables和Jeditable - 字段包含html，但不應該。爲什麼？

Question

我正在使用DataTables和Jeditbale。一切似乎都很好，但是，由於某種原因，當我雙擊表中的任何字段時，它都包含HTML。我在這裏插入了視覺。我還沒有嘗試過任何解決這個問題的方法，因爲我甚至無法理解這將如何發生。我搜索了這個問題，但大多數報告類似問題的人報告了額外的空格;沒有完整的HTML字段。我怎樣才能解決這個問題？如果需要額外的代碼，可以在適當的時候添加。

這裏是我的表碼：

<!-- start table listing --> 
      <table id="myTable" class="stripe hover cell-border row-border"> 
       <thead> 
        <tr> 
         <th id="country_id">Country ID</th> 
         <th id="country">Country Name</th> 
         <th id="country_import">Import Commnents</th> 
         <th id="country_export">Export Comments</th> 
         <th id="country_date_created">Created</th> 
         <th id="country_date_updated">Updated</th> 
         <th id="">Updated by</th> 
         <th id="country_enabled">Enabled?</th> 
         <th id="">Actions</th> 
        </tr> 
       </thead> 

       <tbody> 
       <?php 
        foreach ($query as $row) { 
       ?> 
        <tr <?php echo 'id="'.$row->country_id.'"'; ?> > 


         <td>  
          <?php echo $row->country_id; ?> 
         </td> 


         <td>  
          <a class='table-action-deletelink' href='/admin/country_view/<?php echo ''.$row->country_id.''; ?> '><?php echo $row->country; ?></a> 
         </td> 



         <td>  
          <?php echo $row->country_import_comments; ?> 
         </td> 
         <td>  
          <?php echo $row->country_export_comments; ?> 
         </td> 

         <td>  
          <?php echo $row->country_date_created; ?> 
         </td> 

         <td>  
          <?php echo $row->country_date_last_updated; ?> 
         </td> 

         <td>  
          <?php echo $row->country_updated_by; ?> 
         </td> 






         <td> <?php 
           if ($row->country_enabled == 1) { 
            echo '<span class="glyphicon glyphicon-ok" aria-hidden="true" ></span>'; 
           } else { 
            echo '<span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>'; 
           } ?> 
         </td> 




         <td> 


         <!-- main container --> 
         <div class="dropdown"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
          Dropdown 
          <span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/admin/country_view/<?php echo ''.$row->country_id.''; ?>">View</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Edit</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Deactivate</a></li> 
          <li role="presentation"><a role="menuitem" tabindex="-1" href="/admin/country_delete/<?php echo ''.$row->country_id.''; ?> ">Delete</a></li> 
          </ul> 
         </div> 


         </td> 

      </form> 


        </tr> 
        <?php } ?> 
       </tbody>    
      </table>  
     </div> 
    </div> 
</div> 

這裏是我的javascript實現表：

$(document).ready(function() { 
    //sDeleteURL: "/Home/DeleteData.php" 
    $('#myTable').dataTable().makeEditable({ 
     // some basic config 
     'bProcessing':  true, 
     'bServerSide':  true, 
     'sAjaxSource':  "admin/json_get_countries", 

     stateSave:   true, 
     "scrollCollapse": true, 
     "language": { 
      "lengthMenu": "Display _MENU_ records per page", 
      "zeroRecords": "Nothing found - sorry", 
      "info": "Showing page _PAGE_ of _PAGES_", 
      "infoEmpty": "No records available", 
      "infoFiltered": "(filtered from _MAX_ total records)" 
      } 
    }); 
}); // end of on doc load 

Answer 1

您使用jQuery DataTables Editable plugin內部使用jQuery Jeditable plugin。

根據Jeditable documentation（見使用與紡織，降價，休息，維基），如果字段包含純文本（HTML，降價等）等，則需要使用loadurl參數和sUpdateURL加載內容的內容保存修改後的值。

請參閱Editable DataTable example - custom editors關於Engine version字段如何使用參數loadurl和sUpdateURL中指定的URL編輯和保存。

通過定義aoColumns選項並指定null爲相應的列，可以使某些列爲只讀且不可編輯。 aoColumns是一個按順序保存所有列的選項的數組，該數組的長度必須等於原始HTML表中的列數。

實施例：

$(document).ready(function() { 
    $('#example').dataTable().makeEditable({ 
     sUpdateURL: "UpdateData.php", 
     "aoColumns": [ 
      null, 
      { 
      }, 
      { 
       indicator: 'Saving platforms...', 
       tooltip: 'Click to edit platforms', 
       type: 'textarea', 
       submit:'Save changes', 
       fnOnCellUpdated: function(sStatus, sValue, settings){ 
        alert("(Cell Callback): Cell is updated with value " + sValue); 
       } 
      }, 
      { 
       //indicator: 'Saving Engine Version...', 
       tooltip: 'Click to select engine version', 
       loadtext: 'loading...', 
       type: 'select', 
       onblur: 'cancel', 
       submit: 'Ok', 
       loadurl: 'EngineVersionList.php', 
       loadtype: 'GET', 
       sUpdateURL: "CustomUpdateEngineVersion.php" 
      }, 
      { 
       indicator: 'Saving CSS Grade...', 
       tooltip: 'Click to select CSS Grade', 
       loadtext: 'loading...', 
       type: 'select', 
       onblur: 'submit', 
       data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}", 
       sUpdateURL: function(value, settings){ 
        alert("Custom function for posting results"); 
        return value; 

       } 
      } 
     ]       
    }); 
}) 

參見answer to similar problem with Jeditable。然而，這個答案只針對Jeditable，而不是jQuery DataTables可編輯插件，所以那裏顯示的代碼並不適用，只是解釋。