Answers

• allan Posts: 65,609Questions: 1Answers: 10,909 Site admin

  February 19

  To set a predefined filter when using SearchBuilder, use the searchBuilder.preDefined option.

  Allan
• arie0512 Posts: 29Questions: 7Answers: 0

  February 20

  I know this predifined option but that's only working for one search query.

  I want to have several search queries to the same datatable so the user can choose which predefined query he would like to see.

  Is that possible?
• allan Posts: 65,609Questions: 1Answers: 10,909 Site admin

  February 20

  I'm afraid I don't fully understand the question - sorry.

  Do you mean you want to have multiple conditions applied to the table when it starts? If so, then criteria is an array - you can provide multiple conditions, as shown in the second example in the documentation for searchBuilder.preDefined.

  Or, do you mean you have somehow stored different predefined conditions, and you want the end user to select which one they want to load the table with? In which case, it would be up to you to provide the UI to let the end user select the condition and you would then assign that to searchBuilder.preDefined.

  Or, do you have a list of criteria and you want the end user to be able to pick one of them after the table has been created and have that applied? If so, you could use Buttons along with searchBuilder.rebuild() to set the SearchBuilder state.

  Allan
• arie0512 Posts: 29Questions: 7Answers: 0

  February 23

  Hi Allan, no need to apologize!

  I will try to explain what I want.

  I have a page which will have multiple (a href) links to page 2 where a datatable is shown which contains a colum colorball with different colors.

  With the first link I want to show only the red balls on page 2 and with the second link I want to show only the blue balls on page 2. (as an example offcourse )
• kthorngren Posts: 22,411Questions: 26Answers: 5,152

  February 23 edited February 23

  One option is to set a variable to contain the predefined search. Using the example in the searchBuilder.preDefined docs you could do something like this:

  // Get the search parameters and store in an array
  var valueArray = [ new URLSearchParams(location.search).get('search') ];
  
  new DataTable('#myTable', {
      layout: {
          top1: 'searchBuilder'
      },
      searchBuilder: {
          preDefined: {
              criteria: [
                  {
                      condition: '=',
                      data: 'Office',
                      value: valueArray  // Use the array to set the pre defined search
                  }
              ],
              logic: 'AND'
          }
      }
  });
  

  Kevin
• allan Posts: 65,609Questions: 1Answers: 10,909 Site admin

  February 23

  Okay, so you want to apply a filter to the table based on something like a query parameter? I was about to point you to this thread, but I see that was your own thread!

  Can you explain to me how what you want here is different from what was discussed there?

  Allan
• arie0512 Posts: 29Questions: 7Answers: 0

  February 26

  Sorry, I have mis-explained it in my last post, no good will come out when you are trying to end the week to quickly .....

  I was confusing with the problem you are refering to, this is another challenge.

  I have page which has a datatable and I want to have an Select field above this datatable so users can switch to a pre-defined view.

  What I have so far is this, found on https://datatables.net/examples/api/regex.html

  HTML

        <select class="form-select ps-2 fs-6 mb-2" id="view" onchange="ChangeView()">
          <option value="">All contacts</option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select> 
  

  JS

  $(document).ready(function() {
  
    let table = new DataTable('#tabel-clienten', {
    ajax: {
      url: '/crm/ajax/clienten-data.php',
      type: 'POST'
    },
    columns: [        
      { data: 'clienten.clientnummer' },
      { data: 'clienten.geslacht' },
      { data: 'clienten.voorletters' },
      { data: 'clienten.tussenvoegsel' },
      { data: 'clienten.color' },
      { data: 'adressen.straat' },
      { data: 'adressen.huisnummer' },
      { data: 'adressen.toevoeging' },
      { data: 'adressen.postcode' },
      { data: 'adressen.woonplaats' }     
    ],    
    order: [[0, 'asc']],
    pagingType: 'full_numbers',
    pageLength: 25,        
    search: {
      smart: false
    } 
  }); 
  
  function ChangeView() {
    var x = document.getElementById("view").value;
    if (x === 'red') {
      alert('selected');
      table.column(4).search('red').draw();
    }
  }         
  
  });
  

  If Red is chosen from the Select field than column index 4 must only show the records with red.

  I get now an error in the console "Uncaught ReferenceError: ChangeView is not defined"

  Placing this function outside the document.ready will get an error "Uncaught ReferenceError: table is not defined"

  Is there another option to run a function inside the datatable script?
• allan Posts: 65,609Questions: 1Answers: 10,909 Site admin

  February 26

  Loose the onChange attribute and in place of your ChangeView function do:

  $('#view').on('change', function () {
    let val = $(this).val();
  
    table.column(4).search(x).draw();
  });
  

  Allan
• arie0512 Posts: 29Questions: 7Answers: 0

  February 27

  Tnx Allan, that did the trick!

  In my example I explain it with a simple example but I have 2 questions:

  1. I want in some predefined search queries also a second condition, I have a textfield "already_checked" which contains Yes or No, for example I want in column 4 the red colors where in column 10 (already_checked) the value is No. Is that possible?

  2. Is it possible with your solution to have several different search queries, for example search for red in column 4 and search for blue in column 6? Because in the select field there will not only be a search query in column 4.

  Have a nice weekend!

  Arie
• allan Posts: 65,609Questions: 1Answers: 10,909 Site admin

  February 27

  1) Sure that is possible. Use URLSearchParams to get the query parameter, as we discussed in your previous thread, and tweak the search to suit whatever search condition you need.

  2) Yes. My example code above applied a search to column index 4 (.column(4).search(x)). There is no reason why you can't extend that to have another search term on another column.

  Allan