Search for the columns having the dropdown list

bhargavakl

Hello,

I have a datatable where it has the columns contains the dropdowns. I am unable to search the table based on the selected values of those dropdowns.

I am looking for the implementation which is similar to the below,

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};

var table = $("#example").DataTable({
columnDefs: [
{ "type": "html-input", "targets": [1, 2, 3] }
]
});

This is in the old version of datatable. I am using the datatable version 1.10.3.

I have tried the below way but didnt workout for me.

$.fn.dataTable.ext.type.search.html = function (d) {
    return $(d).val();
};

Thanks & Regards,
Bhargava

sandy

Hi bhargavakl,

I'm afraid that at the moment DataTables does not support this using the API or otherwise. It is however possible to accomplish this by writing your own function. You would need to define your own search box too.

You can find some details on writing a custom filtering function here.

Thanks,

Sandy

bhargavakl

Hello @sandy,

Thanks for your inputs. Even I tried with this approach. But my table has too many columns to search.

Hence I went on to do this, with my custom search, without using the datatable in-built search function.

Thanks,
Bhargava

kthorngren

Have you seen this example?
https://datatables.net/examples/api/multi_filter_select.html

Kevin

bhargavakl

Hello @kthorngren,

Thanks for the link. It's looking good though. But the user wanted only the global search box instead of the controls on the footer to search the table.

I have tried more towards the datatable extensions, which unable to yield the result.

The only problem in my table is the dropdowns, rest all the search works fine (thanks to the datatable fantastic search feature). Datatable search is unable to search the dropdown's selected value.

I am constructing my dropdown as below,

columnDefs: [
                        {
                            "targets": [1],
                            "className": "text-center",
                            "type": "html",
                            "render": function (data, type, row, meta) {
                                if (!isonhold)
                                    return '<span>' + data + '</span>';
                                //below is for temp purpose
                                var defaultselected = data;
                                var id = 'actions_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                var $select = $('<select class="select2 form-control actionsdata" id="' + id + '" style="width:100%; border:1px solid #1AB394"></select>');
                                var processList = row.actionList.split(",");
                                $.each(processList, function (a, b) {
                                    var $option = $("<option></option>",
                                        {
                                            text: b,
                                            value: b
                                        });
                                    if (defaultselected == b) {  //use == instead of ===
                                        $option.attr("selected", "selected");
                                    }
                                    $select.append($option);
                                });
                                return $select.prop("outerHTML");
                            }
                        },
]

Please do let me know anybody tried this earlier. It helps a lot.

Thanks & Regards,
Bhargava

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

It looks like you are trying to put the drop down search in each row of the table. Is this what you want to do?

Kevin

bhargavakl

Hello @kthorngren,

It's not the dropdown search in each row of the table, column 2 contains the dropdowns where user can select the data and save it. Basically, I am doing the inline edit datatable where dropdown is the part of the data selection in column 2.

here is my entire table's columnDefs,

$('#WIPdataTable').DataTable({
                    data: response,
                    pageLength: 100,
                    responsive: true,
                    deferRender: true,
                    dom: "<'row'<'col-md-3'l><'col-sm-8 text-right left-padding'p><'col-md-1 text-right'B>>" +
                        "<'row'<'col-sm-12'tr>>",
                    language: {
                        searchPlaceholder: "Search by the following columns as a criteria"
                    },
                    lengthMenu: [10, 25, 50, 100, 200],
                    columns: [
                        { data: "status" },
                        { data: "actions" },
                        { data: "attentionTo" },
                        { data: "comments" },
                        { data: "jobNo" },
                        { data: "eye" },
                        { data: "shortageReason" },
                        { data: "customer" },
                        { data: "productCode" },
                        { data: "description" },
                        { data: "rplCode" },
                        { data: "newRPL" },
                        { data: "eta" },
                        { data: "lineNo" },
                        { data: "ref2" },
                        { data: "scheduleDate" },
                        { data: "diam" },
                        { data: "sph" },
                        { data: "add" },
                        { data: "cyl" },
                        { data: "base" },
                        { data: "ct" },
                        { data: "logstCd" },
                        { data: "trackNo" },
                        { data: "createdUser" },
                        { data: "createdDate" }
                    ],
                    columnDefs: [
                        {
                            "targets": [0],
                            "render": function (data, type, row, meta) {
                                return '<span>' + data + '</span><input type="hidden" id="lineNo" value=' + row.lineNo + '>';
                            }
                        },
                        {
                            "targets": [1],
                            "className": "text-center",
                            "type": "html",
                            "render": function (data, type, row, meta) {
                                if (!isonhold)
                                    return '<span>' + data + '</span>';
                                //below is for temp purpose
                                var defaultselected = data;
                                var id = 'actions_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                var $select = $('<select class="select2 form-control actionsdata" id="' + id + '" style="width:100%; border:1px solid #1AB394"></select>');
                                var processList = row.actionList.split(",");
                                $.each(processList, function (a, b) {
                                    var $option = $("<option></option>",
                                        {
                                            text: b,
                                            value: b
                                        });
                                    if (defaultselected == b) {  //use == instead of ===
                                        $option.attr("selected", "selected");
                                    }
                                    $select.append($option);
                                });
                                return $select.prop("outerHTML");
                            }
                        },
                        {
                            "targets": [3],
                            "className": "text-center",
                            "render": function (data, type, row, meta) {
                                var datatodisplay = data == null ? '' : data;
                                if (!isonhold)
                                    return '<span>' + datatodisplay + '</span>';
                                return '<input type="text" name="value" value="' + datatodisplay + '" style="box-shadow: 0px 0px 5px 0px rgba(151,163,155,1);border-radius:6px;border:none;width:100%;background-color:initial; color:#676a6c"><span style="display: none;">' + datatodisplay + '</span>'
                            }
                        },
                        {
                            "targets": [10],
                            "className": "text-center",
                            "render": function (data, type, row, meta) {
                                if (!isonhold)
                                    return '<span style="word-wrap:break-word;color: #676a6c">' + data + '</span>';
                                var id = 'rpl_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                var $select = $('<select class="select2 form-control rpl" id="' + id + '" style="width:100%; box-shadow: 0px 0px 5px 0px rgba(151,163,155,1); border-radius:6px;"></select>');
                                var processList = data.split(",");
                                $.each(processList, function (a, b) {
                                    var $option = $("<option></option>",
                                        {
                                            text: b,
                                            value: b
                                        });
                                    if (row.process == b) {  //use == instead of ===
                                        $option.attr("selected", "selected");
                                    }
                                    $select.append($option);
                                });
                                return $select.prop("outerHTML");
                            }
                        },
                        {
                            "targets": [11],
                            "className": "text-center",
                            "render": function (data, type, row, meta) {
                                var datatodisplay = data == null ? '' : data;
                                if (!isonhold)
                                    return '<span>' + datatodisplay + '</span>';
                                return '<input type="text" name="value" value="' + datatodisplay + '" style="box-shadow: 0px 0px 5px 0px rgba(151,163,155,1);border:none;border-radius:6px; width:100%;background-color:initial;color: #676a6c"><span style="display: none;">' + datatodisplay + '</span>'
                            }
                        },
                        {
                            "targets": [12],
                            "className": "text-center",
                            "render": function (data, type, row, meta) {
                                if (!isonhold)
                                    return '<span>' + data + '</span>';
                                var id = 'eta_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                return '<input class="datepicker" id="' + id + '" data-provide="datepicker" value="' + data + '" style="box-shadow: 0px 0px 5px 0px rgba(151,163,155,1);border-radius:6px;border:none;width:100%;height:20px;background-color:initial">'
                            }
                        }
                    ],                    
                });
                return WIPdataTable;
            },

Please have a look and let me know any idea on the same.

Thanks & Regards,
Bhargava

kthorngren

I don't see where you have tried to implement the drop down search. The example I linked to builds the search drop down from the data in the column. Are you asking how to generate the search drop down list from row.actionList for column 2?

Kevin