Unable to get SearchBuilder popup to work

Unable to get SearchBuilder popup to work

mcodermcoder Posts: 19Questions: 9Answers: 0

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.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • mcodermcoder Posts: 19Questions: 9Answers: 0

    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]
                                        }
                                ]
                        });
    
  • mcodermcoder Posts: 19Questions: 9Answers: 0

    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.

  • mcodermcoder Posts: 19Questions: 9Answers: 0

    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.

  • mcodermcoder Posts: 19Questions: 9Answers: 0

    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]
                                    }
                            }
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • mcodermcoder Posts: 19Questions: 9Answers: 0

    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.

Sign In or Register to comment.