Not clear how to include columns in Datatables but have them searchable and not visiabl;e

obrienj

Allan

Below is the client-side definition and the PHP definition.

I have left out some purpose built code in the PHP which is in preCreate, preEdit, and preRemove plus some support functions.

The column in question is "description".

Just loading the URL results in an error showing on the web console (Firefox) and only the indicative data (labels, etc) show but no data from the database.

Datatables (client-side):

           table = $('#cc-list').DataTable({
                processing: true,
                serverSide: true,
                paging: true,
                searching: true,
                select: true,
                responsive: true,
                ordering: true,
                orderFixed: [0, 'asc'],

                ajax: {
                    url: "OTCalMaint.php",
                    type: "POST"
                },
                columns: [
                    {
                        "data": "start",
                        "searchable": true
                    },
                    {
                        "data": "end",
                        "searchable": true
                    },
                    {
                        "data": "title",
                        "searchable": true
                    },
                    {
                        "data": "description",             <======== this column
                        "searchable": true,
                        "visible": false
                    },
                    {
                        data: null,
                        searchable: false,
                        className: "center",
                        defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_copy">Copy</a> / <a href="" class="editor_remove">Delete</a>'
                    }
                ],
                columnDefs: [
                    {
                        "targets": 0,
                        "data": null,
                        "title": "Date",
                        "width": "10%",
                        "render": function (data, type, row, meta) {
                            var wrks = moment(row.start, 'dddd, MMMM D, YYYY h:mm A');
                            var wrke = moment(row.end, 'dddd, MMMM D, YYYY h:mm A');
                            var wrkd = moment(wrks).format('ddd MMM D');
                            return "" + wrkd;
                        }
                    },
                    {
                        "targets": 1,
                        "data": null,
                        "title": "Time",
                        "width": "14%",
                        "render": function (data, type, row, meta) {
                            var wrks = moment(row.start, 'dddd, MMMM D, YYYY h:mm A');
                            var wrke = moment(row.end, 'dddd, MMMM D, YYYY h:mm A');
                            if (row.allDay == '1') {
                                var wrkd = moment(wrks).format('h:mm A') + " -  All Day";
                            } else {
                                var wrkd = moment(wrks).format('h:mm A') + " - " + moment(wrke).format('h:mm A');
                            }
                            return "" + wrkd;
                        }
                    },
                    {
                        "targets": 2,
                        "data": null,
                        "title": "Event",
                        "width": "60%",
                        "render": function (data, type, row, meta) {
                            var wloc = "";
                            var wrkt = "";

                            if (row.location == null) {
                                wrkt = row.title + " - " + row.city + ", " + row.state + " " + row.zipcode;
                            } else {
                                wrkt = row.title + " - " + row.location;
                            }

                            return "" + wrkt.trim();
                        }
                    }
                ],
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });

PHP (server-side)

#region Editor definition
//---------------------------------------------------------------------
// Build Editor instance and process the data coming from _POST
//---------------------------------------------------------------------
Editor::inst( $db, 'calendar.events', 'RID' )

    ->fields(
        Field::inst( 'RID' )
            ->set(false),                           // ID is automatically set by the database on create

        Field::inst( 'id' ),

        Field::inst( 'title' ),

        Field::inst( 'allDay' ),

        Field::inst( 'action' ),

        Field::inst( 'start' )
            ->validator( 'Validate::dateFormat', array(
                "format"  => 'l, F j, Y g:i A',
                "message" => "Please enter a date in the correct format"
            ) )
            ->getFormatter( 'Format::datetime', array(
                'from' => 'Y-m-d H:i:s',
                'to' =>   'l, F j, Y g:i A'
            ) )
            ->setFormatter( 'Format::datetime', array(
                'from' => 'l, F j, Y g:i A',
                'to' =>   'Y-m-d H:i:s'
            ) ),

        Field::inst( 'end' )
            ->validator( 'Validate::dateFormat', array(
                "format"  => 'l, F j, Y g:i A',
                "message" => "Please enter a date in the correct format"
            ) )
            ->getFormatter( 'Format::datetime', array(
                'from' => 'Y-m-d H:i:s',
                'to' =>   'l, F j, Y g:i A'
            ) )
            ->setFormatter( 'Format::datetime', array(
                'from' => 'l, F j, Y g:i A',
                'to' =>   'Y-m-d H:i:s'
            ) ),

        Field::inst( 'whenHold' )->setFormatter( 'Format::nullEmpty' ),

        Field::inst( 'rptHold' )->setFormatter( 'Format::nullEmpty' ),

        Field::inst( 'rfc5545' ),

        Field::inst( 'rfcDates' ),

        Field::inst( 'rfcid' ),

        Field::inst( 'location' ),

        Field::inst( 'description' ),

        Field::inst( 'placeID' ),

        Field::inst( 'institution' ),

        Field::inst( 'address' ),

        Field::inst( 'city' ),

        Field::inst( 'state' ),

        Field::inst( 'country' ),

        Field::inst( 'zipcode' ),

        Field::inst( 'neighborhood' ),

        Field::inst( 'phone' ),

        Field::inst( 'webURL' ),

        Field::inst( 'mapURL' ),

        Field::inst( 'locPicURL' ),

        Field::inst( 'latitude' ),

        Field::inst( 'longitude' )

    )
    #endregion

// I have left out purpose built code for preCreate, preEdit, and preRemoive plus some support functions

#region Processing
    ->process( $_POST )

    ->json();
#endregion

The error I see in the Web Console is:

TypeError: headerCells[i] is undefined[Learn More]  datatables.js:19320:5
    _fnCalculateColumnWidths http://localhost/distLibs/libs/DataTables/datatables.js:19320:5
    _fnInitialise http://localhost/distLibs/libs/DataTables/datatables.js:18443:4
    loadedInit http://localhost/distLibs/libs/DataTables/datatables.js:15037:6
    DataTable/< http://localhost/distLibs/libs/DataTables/datatables.js:15049:5
    each http://localhost/distLibs/libs/jQuery/jquery.min.js:2:2813
    each http://localhost/distLibs/libs/jQuery/jquery.min.js:2:1001
    DataTable http://localhost/distLibs/libs/DataTables/datatables.js:14586:3
    $.fn.DataTable http://localhost/distLibs/libs/DataTables/datatables.js:28889:10
    <anonymous> http://localhost/otcalmaint/otcalmaint/otcalmaint.html:1518:21
    j http://localhost/distLibs/libs/jQuery/jquery.min.js:2:29946
    g/</k< http://localhost/distLibs/libs/jQuery/jquery.min.js:2:30262
        

Sorry the copy/paste compressed each line.

What does this error mean and more important what did I do incorrectly?

Regards,
Jim

allan

Hi Jim,

Do you have five columns in your HTML table? Since 5 columns are defined, you need to have 5 columns there. DataTables will hide the hidden one.

Allan