Defined searches called by custom DT buttons

Defined searches called by custom DT buttons

cj1005cj1005 Posts: 142Questions: 45Answers: 1

Hi, I have a data table of sale orders and currently, users have to use the 'Search Builder' to filter the data, but the majority of the searches are common, so I'd like to have buttons at the top of the data table that performs these common searches when clicked, is this possible?

I can see there is a pre-defined option for the search builder, but I cannot see how this would be replicable to a custom button.

Thanks, Chris

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited May 2021 Answer ✓

    Yep, this example here shows how you can load queries. You could add that API call (searchBuilder.rebuild()) into your button's action function,

    Colin

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    Thank you Colin, I'll have a play :)

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    Hi Colin,

    I've added the code as described, but I'm getting the following error:

    "dataTables.searchBuilder.min.js:151 Uncaught TypeError: Cannot read property '_searchBuilder' of undefined"

    I've created 3 buttons, which all result in the same error as above.

    The code I've added is as follows:

    <script>
    var cSBActiveFilter = { "criteria": [ { "condition": "=", "data": "active", "value": [ "1" ] }, { "value": [] } ], "logic": "AND" };
    var cSBDeadFilter = { "criteria": [ { "condition": "=", "data": "active", "value": [ "0" ] }, { "value": [] } ], "logic": "AND" };
    </script>
    
    <button type="button" id="currentVehicles" >Current Vehicles</button>
    <button type="button" id="deadVehicles" >Deleted Vehicles</button>
    <button type="button" id="searchReset" >Reset</button>
    
    <script>
    $('#currentVehicles').on('click', function() {
        $('#vehiclesTable').DataTable().searchBuilder.rebuild(cSBActiveFilter);
    })
    $('#deadVehicles').on('click', function() {
        $('#vehiclesTable').DataTable().searchBuilder.rebuild(cSBDeadFilter);
    })
    $('#searchReset').on('click', function() {
        $('#vehiclesTable').DataTable().searchBuilder.rebuild();
    })
    </script>
    
    

    Any ideas?

    Cheers, Chris

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    Uncaught TypeError: Cannot read property '_searchBuilder' of undefined"

    Verify that your table id is vehiclesTable. If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    Thank you, Kevin, you were right, I was using the variable reference of the table not the actual table name :s

This discussion has been closed.