JQuery DataTables和Jeditable-字段包含html，但不應包含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 Jeditable插件的 jQuery DataTables Editable 插件 。

根據Jeditable文檔 （請參閱與Textile，Markdown，ReST，WiKi配合使用 ），如果字段包含的內容不是純文本（HTML，Markdown等），則需要使用loadurl參數加載內容，並使用sUpdateURL保存修改后的值。

請參閱Editable DataTable示例-自定義編輯器，以了解如何通過使用loadurl和sUpdateURL參數中指定的URL編輯和保存Engine version字段。

通過定義aoColumns選項並為相應的列指定null ，可以使某些aoColumns只讀且不可編輯。 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;

               }
            }
      ]                          
   });
})

參見Jeditable對類似問題的回答 。 但是，此答案僅針對Jeditable，而不針對jQuery DataTables Editable插件，因此此處顯示的代碼僅適用於說明，並不適用。