Filtering for nested array.

samithasony

Team,

I need help to add filtering for array type.

I've attached my sample txt file. I need to have filter for the first column which is of type array.
For ex. ["Metals Speciated","Glycol Ethers","Inorganic Non-Metalics"].

allan

In what way do you want to filter it? The global search should pick that up okay: http://live.datatables.net/nafibako/1/edit .

Allan

samithasony

I'm getting error when trying to open the URL.
I would like to have the filter in a below way.

kthorngren

I'm getting error when trying to open the URL.

Likely your browser is using SSL and changing the URL from HTTP to HTTPS which won't work.

Take a look at the Search Panes extenstion. Start with this example. Will this do what you want?

Kevin

allan

I'm looking into that error with the live pages at the moment. For the moment, try using Firefox.

Allan

samithasony

Hi Team,

Any update?

allan

You'll need to give me a bit more that 24 hours for an infrastructure change like this.

Until then, did you look at Kevin's answer? It might be more relevant that mine, which didn't use SearchPanes (you didn't mention you wanted to use SearchPanes in your original question, so I just used the global filter).

Allan

samithasony

Thanks for the response.

I've posted my complete code and the image which has the search pane structure, but it is not showing here you need to approve that it seems.

I've gone through the search panes topics but it is not helping.

It is a kind of urgent requirement, It would be great if you can help me resolve the issue quickly.

Below is the reference image of how I want the search for the array field.

samithasony

I would like to have the filter as below.

Below is my script.

<script>
        $(document).ready(function () {
            debugger;
            var chemicalTable = $('#chemicalTable').DataTable({
                 ajax: 'chemical_classification.txt',
                order: [
                    [1, 'asc'],
                    [2, 'asc'],
                    [3, 'asc'],
                    [4, 'asc'],
                    [5, 'asc'],
                    [6, 'asc'],
                    [7, 'asc'],
                    [8, 'asc']
                ],
                //dom: 'rit',
                dom: 'P<"row mx-0"<"col-12 mb-3 pb-3 border-1 border-bottom"ip><"col"l><"col"f><"col text-end"B>>rti<"py-3"p>',
               // dom: 'Pfrtip',
                deferRender: true,
                scrollY: 500,
                scrollX: true,
                scrollCollapse: true,
                scroller: true,
                fixedColumns: true,

                // fixedHeader: true,
                // responsive: true,
                processing: true,
                searchPanes: {
                    orderable: false,
                    //cascadePanes: true,
                },
                buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa-solid fa-copy"></i>',
                    titleAttr: 'Copy'
                }, {
                    extend: 'excelHtml5',
                    text: '<i class="fa-solid fa-file-excel"></i>',
                    titleAttr: 'Excel'
                }, {
                    extend: 'csvHtml5',
                    text: '<i class="fa-solid fa-file-csv"></i>',
                    titleAttr: 'CSV'
                }, {
                    extend: 'pdfHtml5',
                    text: '<i class="fa-solid fa-file-pdf"></i>',
                    titleAttr: 'PDF'
                }
                   
                ],
               
                columnDefs: [{
                    visible: false,
                    targets: [0]

                    //targets: [0, 7, 8, 9]
                    // targets: [0, 7, 8, 9]
                },
                {
                    targets: 1,
                    render: function (data, type, row, meta) {
                        if (type === 'display') {
                            data = '<a target=_blank href=seqg-details.html?id=' + row[9] + '>' + data + '</a>';
                        }
                        return data;

                    }

                },

                {
                    searchPanes: {
                        show: false
                    },
                    targets: [5, 7, 8, 6]
                    // targets: [4, 5, 6, 9]

                }, {
                    searchPanes: {
                        initCollapsed: true
                    },
                    // targets: [1, 2, 3]
                    targets: [7, 8, 1, 2, 3]

                }, {
                    targets: 0,
                    searchPanes: {
                        dtOpts: {
                            select: {
                                style: 'single'
                            }
                        }
                    }
                }
                    //{ "width": "20%", targets:[ 0,1,2,3,4,5,6,7,8,9] }
                ],

                initComplete: function () {
                    $("div.dtsp-verticalPanes").find('table').addClass("table-striped");
                }

               
            });

            // $('#chemicalTable').hide();
            // $('div#chemicalTable_info').hide();

            chemicalTable.searchPanes();
            $("div.dtsp-verticalPanes").append(chemicalTable.searchPanes.container());
            
        });


    </script>

allan

Approved now.

If you could link to a page showing the issue, that would be really helpful.

Allan

samithasony

I haven't published the latest code on the website. I have it locally.

allan

Hi,

Based on your example JSON from your first post, I've put this little example together showing how SearchPanes can be used with the array from it: https://live.datatables.net/nafibako/2/edit .

Let me know if that helps.

Regards,
Allan