Curious problem using the Search box on the Datatables list window

obrienj

I have most everything working with Datatables and the editor.

I have just started to work with search and encountered something that I have no idea where to start looking.

As soon as I type a character into the search box I get the following pop-up:

DataTables warning: table id=cc-list - Unknown field:  (index 3)

I don't know where to start.

My table definition follows:

            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" },
                    { "data": "end" },
                    { "data": "title" },
                    {
                        data: null,
                        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 }
                ]
            });
        });

Regards,
Jim

allan

Hi Jim,

Add searchable: false (columns.searchable) into your definition for the last column in the table. Otherwise the server-side script will attempt to search on it, but it knows nothing about that column.

Allan

obrienj

Allan,

As a follow-up. I would like to offer the user a "search" button which presents a pop-up on which they specify a search value and select the columns they wish to search.

I would also provide a "reset" button to restore/reload the full list.

Is there an example or guidelines available to do such a search?

Regards,
Jim

allan

search() is the method you want here. Open your popup using whatever plug-in or code you need to display it the way you want and then when the search button is clicked, call search() with the search value.

Allan

obrienj

OK, I'm missing something basic.

I tried "searchable: false" in the last "columns" definition as follows:

                columns: [
                    {
                        "data": "start",
                        "searchable": true
                    },
                    {
                        "data": "end",
                        "searchable": true
                    },
                    {
                        "data": "title",
                        "searchable": true
                    },
                    {
                        data: null,
                        searchable: false,          <===== added this
                        className: "center",
                        defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_copy">Copy</a> / <a href="" class="editor_remove">Delete</a>'
                    }

and the error from the first question went away:

So I tried a word that is in only one "title" in the searchbox and other than a couple blinks, nothing happened.

So 1st question, what did it do wrong so that row wasn't found by search?

Next, I have at least 5 addition columns in the database that I don't want to display in the list but I do want subject to searching.

So 2nd question, what do I do to include them but not display them? I tried including them in the columns list with "searchable: true" and "visible: false" but that generated an error about "headerlist[i] missing"

I know this has to be easier than this.

At this point I just want the built-in search to work so I can see if it is enough for my requirements.

Regards,
Jim

allan

Hi Jim,

So 1st question, what did it do wrong so that row wasn't found by search?

I don't see anything obviously wrong with the code there. Any chance of a link to the page showing the issue and also your PHP code please?

So 2nd question, what do I do to include them but not display them? I tried including them in the columns list with "searchable: true" and "visible: false" but that generated an error about "headerlist[i] missing"

That should be the way to do it. What is headerlist? I don't see that in the above code.

Allan

obrienj

Allan,

I think I'll split this into 2 questions if that is ok?

Regards,
Jim

allan

1 and 2.

Allan