Unable to get SearchBuilder popup to work

mcoder

This is my first time using SearchBuilder. I was able to add it to my page and limit the columns that were available using the setup

        var table = $("#home").DataTable({
                searchBuilder: {
                        columns: [1,2,3,4,5,6,8]
                },
                dom: 'QB<"top"lfrt>lip',
                fixedHeader: true,
                colReorder: {
                        fixedColumnsLeft: 1
                },
                columnDefs: [ {
                        type: "html-input", "targets": [0,8],
                        type: "date", "targets": [7],
                        type: "num", "targets": [4],
                        className: "noVis", "targets": [0,9]
                } ],
                buttons: [
                        { extend: 'colvis', columns: ':not(.noVis)' }
                ],
                "lengthMenu": [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
        });

I saw the example at this link that showed a popup window. I have not been able to merge the existing code to match that and get it working. Clicking the 'Search Builder' button on the screen does not show the popup. It showed once, but would not come back again.

This is one of the ways I've tried (unable to figure out how to hide the columns in this format)

            var table = $("#home").DataTable({
                    dom: 'B<"top"lfrt>lip',
                    fixedHeader: true,
                    colReorder: {
                            fixedColumnsLeft: 1
                    },
                    columnDefs: [ {
                            type: "html-input", "targets": [0,8],
                            type: "date", "targets": [7],
                            type: "num", "targets": [4],
                            className: "noVis", "targets": [0,9]
                    } ],
                    buttons: [
                            {
                                    extend: 'colvis', columns: ':not(.noVis)'
                            },
                            {
                                    extend: 'searchBuilder',
                                    config: {
                                            depthLimit: 4
                                    }
                            }
                    ],
                    "lengthMenu": [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
            });

As far as I can tell from other examples, I should have been able to just add the searchbuilder section to the buttons array to get the popup working.

kthorngren

Sounds like a styling issue. First make sure you are using the correct stying integration files for the styling framework you are using. Use the Download Builder to get the proper files.

Your code snippet works here:
http://live.datatables.net/zazagore/1/edit

We will need a link to your page or a test case replicating the issue to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mcoder

Thank you. I updated my files and the popup is now working. However, I still cannot figure out how to reconfigure it so that only certain columns are visible with this format. I have tried the following, but it still shows all columns:

        var table = $("#home").DataTable({
                searchBuilder: {
                        columns: [1,2,3,4,5,6,8]
                },
                dom: 'B<"top"lfrt>lip',
                buttons: [
.                        {
                          extend: 'searchBuilder',
                          config: {
                                depthLimit: 4
                          }
                        }
                ]
        });

and this

                    buttons: [
    .                        {
                              extend: 'searchBuilder',
                              config: {
                                    depthLimit: 4,
                                    columns: [1,2,3,4,5,6,8]
                              }
                            }
                    ]
            });

and this

                            buttons: [
            .                        {
                                      extend: 'searchBuilder',
                                      config: {
                                            depthLimit: 4
                                      },
                                      columns: [1,2,3,4,5,6,8]
                                    }
                            ]
                    });

mcoder

My other concern is that most examples show how to modify using searchBuilder: { } as the main entry. I will need to make other mods to search fields that contain text boxes. Do I have to move all these under buttons now or keep them under searchBuilder, because the columns didn't seem to work once I added "extend: 'searchBuilder'" to buttons.

mcoder

I have also tried this example https://datatables.net/extensions/searchbuilder/examples/customisation/buttonText.html where I change the text on the button. It seems whenever I put anything in the Button group the searchBuilder group is ignored.

mcoder

After much frustration I have figured out how to select specific columns, but I am not sure why I would need two config sections

                buttons: [
                        { extend: 'searchBuilder',
                                config: {
                                        depthLimit: 2,
                                },
                                config: {
                                        columns:  [1,2,3,4,5,6,8]
                                }
                        }

kthorngren

The second is overwriting the first so the searchBuilder.depthLimit is not being set. You will need one config option, like this:
http://live.datatables.net/zazagore/2/edit

Kevin

mcoder

Odd, I had tried that at one point and it didn't work. Could have been a caching issue. But it is working now that I restarted the browser.