Question

我使用Datatables插件（http://www.datatables.net）和数据表编辑器（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',
'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" }

根据经验，我知道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" }

数据表 - 将编辑器集成到我现有的表中

1 个答案: