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 (см Использование с текстильным, Markdown, ReST, вики), если поле содержит контент, кроме обычного текста (HTML, Markdown, и т.д.), вам нужно использовать loadurl параметр для загрузки содержимого в и sUpdateURL для сохранения измененного значения.

См Editable DataTable example - custom editors о том, как Engine version поле редактируется и сохраняется с помощью URL-адресов, указанных в loadurl и sUpdateURL параметров.

Вы можете сделать определенные столбцы доступными только для чтения и не редактируемые, указав опцию 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 Редактируемый плагин, поэтому код, показанный там, не применяется, просто объяснение.