Datatables - интеграция редактора в мои существующие таблицы

Question

У меня есть некоторые настройки таблиц с использованием плагина Datatables ( http://www.datatables.net/) и редактора Datatables ( http://editor.datatables.net/).

Я пытаюсь интегрировать редактор в мои существующие таблицы, но не определен во всех полях редактирования (во всплывающем окне).

Единственное различие, которое я вижу между тем, что у меня есть, и загрузкой генератора - это настройка 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',
'[e-mail]'
],
['804',
'david',
'Davies',
'[e-mail]'
],      
    ]; 
                    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" }

Я знаю из опыта, что datatables/jvascript чувствителен к регистру, так что, возможно, проблема была с mDataProp, Если это не так, мы можем пойти глубже:D

ОБНОВИТЬ:

Изменить это:

"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" }