the settings in datatables.default

$.extend($.fn.dataTable.defaults, {
....
    searchBuilder: {
        grayscale: false
    },
....
} );

Buttons added that activated the extensions:

            searchAppTable.button().add(null, {
                extend: 'searchBuilder',
                grayscale: false,
                className: 'btn-secondary',
                config: {
                    depthLimit: 3,
                    columns: [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 28, 30, 31, 32, 33, 34, 35, 36, 37, 38]
                }
            });

This now not working for searchbuilder with the latest versions of dataTables and relevant extensions.
However if the default section for searchBuilder is removed from defaults, the button.add API works again...

$.extend($.fn.dataTable.defaults, {
....
    /* searchBuilder: {
        grayscale: false
    }, */
....
} );

We were not depending on the defaults for searchBuilder so we just removed it, so this is really a FYI for anyone experience the same.

KR,
Björn Hasselberg

I want to make for my collegues some predefined search queries.

What I want is a select field with predefined seatch queries. For example sometime like this:

<select name="predined_search" id="predined_search">
  <option value="name_starts_with_a">Name starts with an A</option>
  <option value="city_from_new_jyork">Clients from New York</option>
  <option value="age_greater_than_40">Older than 40</option>
</select>

Is this possible with SearchBuilder?

Best regards,

Arie

            {
                data: "Countries.country_name",
                type: "string"        // Required by DT SearchBuilder                             
            },

but now I can't find anything in SearchBuilder docs that says I have to define data type. Do I need this type of specificity?

Thanks for your help and this fabulous library !

The setup of the column is shown below (also see test case).

I used one of your examples (https://datatables.net/extensions/searchbuilder/examples/customisation/orthogonal.html) and modified it to reflect my situation. Based on your example and documentation (https://datatables.net/reference/option/columns.searchBuilder.orthogonal), I expect the dropdown to no longer include the span, but it still shows up. The console.log shows that for filtering, the unwanted part is cut off.

What am I doing wrong?

{
            data: 'rating',  title: 'rating',
            searchBuilder: {
                orthogonal: {
                    display: 'filter'
                }
            },
            render: function (data, type, row, meta) {
              var thisval=null;
              if (data === "" || data === null) thisval=data;
              else if (type === 'filter') {
                var pos = data.indexOf('<span class="what');
                if (pos > 0) thisval=data.substring(0,pos-1);
                else thisval=data;
              }
              else thisval=data;
              console.log('type: ' + type + '  thisval: ' + thisval);
              return data;
            }
        },

Many thanks,
Beate

I would like to know if there is a way to avoid duplicating the class in the header rows in order to tell the searchBuilder component not to include columns that have a given css class?

I have the orderCellsTop option set to true to tell DataTable that the "real" header is in the first header row.

I works if I have only one header but if I add one header row (for filtering) it does not work anymore.

Is it a small bug or is this the desired behavior?

As discussed here https://datatables.net/forums/discussion/80822/how-to-exclude-columns-for-searchbuilder, wouldn't it be possible to configure the column selection behavior for the "searchBuilder" component via the "columnDefs" option?

I noticed that a small string of text was missing that needed to be translated in the file found here:
https://datatables.net/plug-ins/i18n/French.html

See: https://cdn.datatables.net/plug-ins/2.2.2/i18n/fr-FR.json

I have completed the json file by adding the "search" entry in "searchBuilder" section and it works perfectly.

Can you add this new entry for the next release please?

Thanks in advance for your answer and have a nice day.

When using serverSide processing it is important to use this option to maintain consistent conditions across different pages of the table and also to reduce the number of requests to the server.

How does that option work exactly to reduce the number of requests to the server?

I set up the example exactly the way I need it, i.e., initially the page is loaded with an empty table. The data is then loaded in the table when the user clicks on a button. Therefore, to see that this is not working, after the page has loaded, click on the button Replace Data at the very top. At this point, the table should only show 1 line, the one for which the Time Unit is "ALL". The search criteria are not completely loaded though and all rows are shown. The search criteria appear to not populate the value box with the options based on the data.

I tried to initially work the example with other data just to give a simplified example, but with my simplified data the feature worked just fine, so it's something about my table that appears to cause this issue.

Please let me know what I am doing wrong. Thank you, Beate

How can I search inside the datatable inside my modal (the input field with type datatable)?

    const editor = new DataTable.Editor({
        ajax: '/data-tables/stock-check',
        fields: [
            {
                label: 'Name:',
                name: 'stock_check_list.name'
            },
            {
                label: 'Items:',
                name: 'items_data[].ItemId',
                type: 'datatable',
                multiple: true,
                optionsPair: {
                    value: 'ItemId'
                },
                config: {
                    columns: [
                        {
                            title: 'ItemId',
                            data: 'ItemId'
                        },
                        {
                            title: 'Description',
                            data: 'Description'
                        },
                        {
                            title: 'InventoryLocation',
                            data: 'InventoryLocation'
                        },
                        {
                            title: 'InventoryBalance',
                            data: 'InventoryBalance'
                        },
                        {
                            title: 'LatestInventoryDate',
                            data: 'LatestInventoryDate'
                        },
                        {
                            title: 'TotalValue',
                            data: "null",
                            render: (data, type, row) => {
                                return row.InternalOrderPrice * row.InventoryBalance
                            }
                        },
                    ]
                }
            }
        ],
        table: tableElement
    });

Debugger code (debug.datatables.net):
oyazih

Error messages shown:
None

Description of problem:
With the SearchBuilder plugin active, no matter what AJAX query it builds (which all seem correct in the Network console panel), it never filters the result set on the page - no errors in the console so I'm stuck on how to troubleshoot it? Does SearchBuilder not actually work for AJAX generated tables?

Is it possible to set a max width for this.

There is no unique class on the search builder modal so I can't modify come css to address only the searchBuilder modal it will affect all the modals with dt-button-collection dtb-collection-closeable.

You can sort of use the Button example to see it but since the example in in a frame it's not perfect.

https://datatables.net/extensions/searchbuilder/examples/initialisation/button.html

My Datatable is very wide so I don't want to force the Data Table into a fixed frame.
Seen here.

When I click the "Search Builder" button, it already sets up an empty filter. I would like it to open the search builder without any filters, like this:

Is it possible?

Additionally, is it possible to add a custom button (or div) inside the search builder, like this:

Thank you in advance for your help/answer,
Mathieu.

I have three columns that conflict with each other when using quick search. One is a department name, the next is a department hierarchy from the university level down to the department so it includes the department name and the third is a specific level within the hierarchy which represents a "school" which could also be the department for a given row. This results in "Quick Search" not working if you allow all three columns to be searchable. So I have disabled search for the hierarchy and the school with searchable=false but I allow the search to work across the department column with searchable=true.

Now that I have added searchBuilder I was happy to see the two "non-searchable" columns were still listed in the Search Builder list of columns. However when I base a search on one of these columns no data is returned. If I change the column to searchable and test again then searchBuilder works. So I think search builder is inconstantly honoring the searchable boolean. It either should not include the column in the list of columns you may base your search on or it should include the column in the list and should work as you would expect if that column is searched.

I prefer the later because "Quick Search" needs these two columns to be disabled since it is very basic and looks for data across all columns at the same time, but searchBuilder which addresses each column independently doesn't need to have search disabled and honestly I can't think of a case where you would want to disable a column in searchBuilder.

If anyone thinks it is necessary to be able to disable search on a column in searchBuilder then I think there needs to be two "searchable" booleans. One for the standard search and another for searchBuilder. Perhaps searchBuilderSearchable=false or something like that.

Looking for something like searchBuilderEnabled: false

• Scroll down to "Related".
• Click any link.
• 404

I apologize in advance for no test case, this requires serverSide data I think.

If I call this code in a setTimeout, it works!

setTimeout(function () {
    console.log(table.searchBuilder);
    var d = table.searchBuilder.getDetails();
    console.log(d);
}, 3000);

There is some issue where getDetails chokes if the server side data has not loaded yet.

I am just wondering if I can use searchBuilder to filter rows based on their "hidden" data.
I mean data that are not displayed in a specific column but are there in the row object data.

Thanks for the help!

My only other option is to create some auxiliary field that is e.g., "N" when the condition is not met and use that auxiliary field with a not equal, but I would prefer to avoid that.

Thank you.

if (data == null) {
return null;
} else if (data == "1") {
return "✔";
} else if (data == "2") {
return "✖";
}

i would like when i select equal to in seachbuilder, that the empty value doesn't show (because it's already possible to select empty value with the empty option so there is no reason to show in the equal to option). How can i do this ?

Thx for your time / Answer

I have a datatables set up and i would like to send a filter to my tables (using seachbuilder) when i press a button (or a div doesn't matter) in my page, how do i do this ?

i have tried :

table.searchBuilder
    .destroy() // Supprimez les filtres existants
    .conditions([ // Ajoutez un filtre pour la colonne Collaborateur
        { label: 'Collaborateur', name: 'COLLABORATEUR_AD', type: 'text', value:  }
    ])
    .filterChanged(); // Appliquez le filtre

but it doesn't work for me, i have this error Uncaught TypeError: table.searchBuilder.destroy is not a function and i have the same error with conditions when i don't use .destroy !

Thx for your help / time,
Mathieu.

i would like when i use searchbuilder, that i can search each words individually (actualy the filter is like this, how i m suppose to do ?)

Thank for your time / answer

Thanks,
Lisa

This happens when a value is selected from a search pane on a page number > 1.

This issue can be reproduces on the following demo page:
https://datatables.net/extensions/searchpanes/examples/initialisation/simple.html

• Open the demo page
• Press the page 2 button
• Select accountant from search pane Position
• This results in an empty page
• Pressing the page 1 button shows the two accountants

This does not apply to the demo page only. I am seeing the same result in my own tables when I'm using search panes. Is this intended behavior? Is it possible to redirect searches to page 1 (generally)? I'm open for other suggestions as well...

Thanks,
Peter

We format all true values as 'Yes' and false values as 'No', which works great. Editing values inline just by typing in 1, True, 0 or False goes smoothly and even null handling in saving works quite well when saving empty value.

However, using SearchBuilder to show only null values, 0 AND nulls or 1 AND nulls does not work at all. What we need is basicly three choises in selections: 'Yes', 'No' and 'Empty'. Is there somebody who have implemented something like that?

This is an initial request for guidance on what to investigate to pinpoint error when using SearchBuilder Indent/Outdent feature.

Debugger code (debug.datatables.net) : efowiy

Uncaught TypeError: Cannot read properties of undefined (reading 'sDefaultContent')
at Object.S [as _fnGetCellData] (datatables.min.js:43:17921)
at w.initSelect [as init] (datatables.min.js:143:20476)
at w._populateValue (datatables.min.js:143:18633)
at w.populate (datatables.min.js:143:9533)
at HTMLButtonElement.<anonymous> (datatables.min.js:143:53776)
at HTMLButtonElement.dispatch (jquery-3.6.4.min.js:2:43184)
at y.handle (jquery-3.6.4.min.js:2:41168)
S @ datatables.min.js:43
w.initSelect @ datatables.min.js:143
w._populateValue @ datatables.min.js:143
w.populate @ datatables.min.js:143
(anonymous) @ datatables.min.js:143
dispatch @ jquery-3.6.4.min.js:2
y.handle @ jquery-3.6.4.min.js:2

Using SearchBuilder works fine and processes the table correctly. However, at times when using the INDENT and OUTDENT functions, the above error is received.
I am trying to determine what to investigate further to identify the component that is causing the error.
In the debug code this error was produced on *R3_tbl

In the following code snippet, the issue appears to be driven by value n being passed in with a value of "" rather than a numeric value.
function S(t, e, n, a) {
"search" === a ? a = "filter" : "order" === a && (a = "sort");
var r = t.iDraw
, o = t.aoColumns[n]
, i = t.aoData[e]._aData
, l = o.sDefaultContent
, s = o.fnGetData(i, a, {
settings: t,
row: e,
col: n
});

Cheers
Keith

Andreas

     let table = $('#userTable').DataTable({
      ajax: "{{ route('admin.users.index') }}",

      order: [2, 'ASC'],
      searchBuilder: {},

      language: {
        searchBuilder: {
          button: '<i class="fa-duotone fa-user-magnifying-glass fa-lg dt-btn-duotone"></i>',
        }
      },

      columnDefs: [{
        target: [0, 1],
        className: 'text-center'
      }, {
        searchBuilder: {
          defaultCondition: '=',
          orthogonal: {
            display: 'filter'
          }
        },
        target: [2, 3],
        className: '',
        orderable: true,
        searchable: true
      }, {
        targets: '_all',
        className: '',
        orderable: false,
        searchable: false
      }],

      columns: [{
        data: 'user_status'
      }, {
        data: 'user_nation'
      }, {
        data: 'name',
        name: 'name'
      }, {
        data: 'club.shortName'
      }, {
        data: 'roles'
      }, ],
      buttons: dtButtons,
      initComplete: function() {
        $('#userTable').removeClass('d-none').addClass('d-table');
      }
    });

Hi,

When using the indent/outdent criteria function and clicking on the button the tooltip boxes do not disappear. If just hovering without execution they disappear.

It appears from the 'role' log that each successive tooltip gets added to the log AND as a div and then when the hover is no longer active the div deleted and the log updated to display:none.

But when the function is clicked the tooltip changes to 'outdent', a new div is created and the old 'indent' div is never deleted. So it may just be a sequencing problem.

Cheers
Keith