数据表 - 整合编辑成我现有的表

Question

我必须使用数据表插件（http://www.datatables.net）一些表设置和数据表编辑器（http://editor.datatables.net）。

我想编辑器整合到我现有的表，但在所有编辑字段都得到undefinded（在弹出）。

唯一的区别我可以与我有什么和发电机下载是aoColumns设置见。

这是我目前有：

"aoColumns": [ 
{ "sTitle": "id" }, 
{ "sTitle": "Name" }, 
{ "sTitle": "Surname" }, 
{ "sTitle": "Email" } 

但是编辑代码有：

"aoColumns": [ 
{ "mDataProp": "id" }, 
{ "mDataProp": "Name" }, 
{ "mDataProp": "Surname" }, 
{ "mDataProp": "Email" } 

当我改变 “sTitle” 到 “mDataProp” 我的表不再负载。

我清楚地要对这个错误的方式......在这个任何方向将是非常赞赏。

编辑：

这里是我的全码：

<script type="text/javascript"> 
    function fnShowHide(iCol){ 
     /* Get the DataTables object again - this is not a recreation, just a get of the object */ 
     var oTable = jQuery('#example').dataTable(); 

     var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; 
     oTable.fnSetColumnVis(iCol, bVis ? false : true); 
    } 

    (function($){ 

    $(document).ready(function() { 

    var aDataSet = [ 
      var aDataSet = [ 
['805', 
'Emelia', 
'Smith', 
'emelia_s@yahoo.com' 
], 
['804', 
'david', 
'Davies', 
'ddavies@yahoo.co.uk' 
],  
    ]; 
        var editor = new $.fn.dataTable.Editor({ 
         "ajaxUrl": "php/table.wp_newsletter.php", 
         "domTable": "#example", 
         "fields": [ 
       { 
        "label": "First Name", 
        "name": "name", 
        "type": "text" 
       }, 
       { 
        "label": "Last Name", 
        "name": "surname", 
        "type": "text" 
       }, 
       { 
        "label": "Email Address", 
        "name": "email", 
        "type": "text" 
       } 
      ] 
        }); 
        var oTable;    
        var oTable = $('#example').dataTable({ 
         "sDom": '<"postbox full"<W>><"clear"><"postbox full"<C><T>><"clear"><"postbox full"<lfr>><"clear"><"postbox full"<t>>ip', 
         "oColumnFilterWidgets": { 
          "aiExclude": [ 0,1,2,3,6,7,9 ], 
         }, 
         "iDisplayLength": 50, 
         "sPaginationType": "full_numbers", 
         "bSortClasses": false, 
         "aaData": aDataSet, 
         "oLanguage": { 
          "sSearch": "Search all columns:" 
         }, 
         "oTableTools": { 
         "sSwfPath": "swf/copy_csv_xls_pdf.swf", 
         "sRowSelect": "multi", 
         "aButtons": [ 
          { "sExtends": "editor_create", "editor": editor }, 
          { "sExtends": "editor_edit", "editor": editor }, 
          { "sExtends": "editor_remove", "editor": editor } 
         ] 
         }, 
         "aoColumns": [ 
          { "sTitle": "id" }, 
          { "sTitle": "Name" }, 
          { "sTitle": "Surname" }, 
          { "sTitle": "Email" }, 
          { 
           "sTitle": "Admin", 
           "sClass": "center", 
           "sDefaultContent": '<a href="" class="editor_edit">Edit</a>/<a href="" class="editor_remove">Delete</a>' 
          } 
         ], 
        }); 

        oTable.fnSetColumnVis(7, false); 
        oTable.fnSetColumnVis(8, false); 
        oTable.fnSetColumnVis(9, false); 

        // New record 
        $('a.editor_create').on('click', function (e) { 
         e.preventDefault(); 

         editor.create(
          'Create new record', 
          { "label": "Add", "fn": function() { editor.submit() } } 
         ); 
        }); 

        // Edit record 
        $('#example').on('click', 'a.editor_edit', function (e) { 
         e.preventDefault(); 

         editor.edit(
          $(this).parents('tr')[0], 
          'Edit record', 
          { "label": "Update", "fn": function() { editor.submit() } } 
         ); 
        }); 

        // Delete a record (without asking a user for confirmation) 
        $('#example').on('click', 'a.editor_remove', function (e) { 
         e.preventDefault(); 

         editor.remove($(this).parents('tr')[0], '123', false, false); 
         editor.submit(); 
        }); 

        var asInitVals = new Array(); 

        $("#filter input").keyup(function() { 
         /* Filter on the column (the index) of this element */ 
         oTable.fnFilter(this.value, $("#filter input").index(this)+1); 
         //console.log($("#filter input").index(this)+1); 
        }); 
        /* 
        * Support functions to provide a little bit of 'user friendlyness' to the textboxes in 
        * the footer 
        */ 
        $("#filter input").each(function (i) { 
         asInitVals[i] = this.value; 
        }); 

        $("#filter input").focus(function() { 
         if (this.className == "search_init") 
         { 
          this.className = ""; 
          this.value = ""; 
         } 
        }); 

        $("#filter input").blur(function (i) { 
         if (this.value == "") 
         { 
          this.className = "search_init"; 
          this.value = asInitVals[$("#filter input").index(this)]; 
         } 
        }); 

    }); 

    }(jQuery)); 


     </script> 

Answer 1

尝试改变：

"aoColumns": [ 
    { "mDataProp": "id" }, 
    { "mDataProp": "Name" }, 
    { "mDataProp": "Surname" }, 
    { "mDataProp": "Email" } 

到

"aoColumns": [ 
{ "sTitle": "id" }, 
{ "mDataProp": "name", "sTitle": "Name" }, 
{ "mDataProp": "surname", "sTitle": "Surname" }, 
{ "mDataProp": "email", "sTitle": "Email" } 

我从经验中知道，数据表/ jvascript是案例森因此可能是mDataProp的问题。如果不是的话，我们可以去寻找更深层次的：d

UPDATE：

更改此：

"fields": [ 
      { 
       "label": "First Name", 
       "name": "name", 
       "type": "text" 
      }, 
      { 
       "label": "Last Name", 
       "name": "surname", 
       "type": "text" 
      }, 
      { 
       "label": "Email Address", 
       "name": "email", 
       "type": "text" 
      } 

要：

"fields": [ 
      { 
       "label": "ID", 
       "name": "id", 
       "type": "text" 
      }, 
      { 
       "label": "First Name", 
       "name": "name", 
       "type": "text" 
      }, 
      { 
       "label": "Last Name", 
       "name": "surname", 
       "type": "text" 
      }, 
      { 
       "label": "Email Address", 
       "name": "email", 
       "type": "text" 
      } 

，然后更新此：

"aoColumns": [ 
{ "mDataProp": "id", "sTitle": "id" }, 
{ "mDataProp": "name", "sTitle": "Name" }, 
{ "mDataProp": "surname", "sTitle": "Surname" }, 
{ "mDataProp": "email", "sTitle": "Email" }