Replies

• kthorngren Posts: 20,452Questions: 26Answers: 4,802

  September 2022 edited September 2022

  This example will work with server side processing. The key is the use of the column().search().

  Depending on the server side processing script you are using the Search Builder extension or Search Panes extension are other options.

  Kevin
• yshtil Posts: 17Questions: 6Answers: 0

  September 2022

  Thank you very much. I changed the event handler so that the request sent when I press RETURN. However, the values in the other search boxes are "stuck" and this messes up the search. I was able to change one search value only per request.
• kthorngren Posts: 20,452Questions: 26Answers: 4,802

  September 2022

  However, the values in the other search boxes are "stuck" and this messes up the search.

  You can clear the the column searches with columns().search() with an empty search string, for example: table.columns().search(""); Then perform the column().search() for the appropriate column. Is this what you mean? You will need to clear the text inputs as Datatables knows nothing about these inputs.

  I was able to change one search value only per request.

  Not sure what you mean and if this is a question.

  Kevin
• yshtil Posts: 17Questions: 6Answers: 0

  September 2022

  I guess I did't explain it correctly.
  There is
  1) The global search input with an X (clear) mark(BTW, how to create an input like this?)
  2) One input per column created as per example

  If I press ENTER in any of these CHANGED inputs, a request goes to the server with the search strings found in all of these inputs. In other words pressing ENTER in any of the inputs searches using the values in ALL inputs. This defeats the purpose of per-column search if other inputs are not empty.

  Moreover, if i change the value of one of the inputs, but press ENTER in an another (changed) input, the OLD value from the former input is used as if I didn't change it at all.

  I may be missing something ...
• kthorngren Posts: 20,452Questions: 26Answers: 4,802

  September 2022

  The global search input with an X (clear) mark(BTW, how to create an input like this?)

  See this SO thread for some ideas.

  In other words pressing ENTER in any of the inputs searches using the values in ALL inputs. This defeats the purpose of per-column search if other inputs are not empty.

  This is expected behavior. If you have search terms in multiple columns they all need to be sent to the server for searching. If only the column that you changed is sent then the server won't know about the others to apply the search for all the columns.

  Maybe you can describe the problem you are having.

  Moreover, if i change the value of one of the inputs, but press ENTER in an another (changed) input, the OLD value from the former input is used as if I didn't change it at all.

  Sounds like you call column().search() when enter is pressed. Datatables doesn't know anything about the column search inputs since they are something you added. Datatables uses the search terms applied using column().search() not what is in the inputs themselves.

  If you still need help please provide a test case so we can see what you are doing. You can use one of the server side processing templates here.

  Kevin
• yshtil Posts: 17Questions: 6Answers: 0

  September 2022

  I don't call column.search explicitly at all. If it is called, I wonder how I can control it?
  Here is the code I initialize the table with:

   $(document).ready(function () {
  
    // Setup - add a text input to each footer cell
    $('#usersData tfoot th').each(function () {
    var title = $(this).text();
    $(this).html('<input type="search" placeholder="Search ' + title + '" />');
    });
  
    $('#usersData').DataTable( {
          initComplete: function () {
              // Apply the search
              this.api()
                  .columns()
                  .every(function () {
                      var that = this;
   
                      $('input', this.footer()).on('keypress', function (e) {
                          if ((e.key === "Enter") && (that.search() !== this.value)) {
                              that.search(this.value).draw();
                          }
                      });
                  });
          },
    "search": {
      "return": true
    },
    columnDefs: [
    { targets: '_all', orderable: false },
    ],
    serverSide: true,
    processing: true,
    ajax: {
    url: '/?table=users',
    type: 'POST'
    }
    }
    );
  

  And here is the initial HTML of the table:

  <table id="usersData" class="display" data-page-length="10">
      <thead>
        <tr>
                  <th>User Name</th>
                  <th>User Location</th>
                </tr>
      </thead>
      <tfoot>
                  <th>User Name</th>
                  <th>User Location</th>
                </tr>
      </tfoot>
    </table>
  </div>
  
• kthorngren Posts: 20,452Questions: 26Answers: 4,802

  September 2022

  Line 19 (that.search(this.value).draw();) is where you are using column().search(). The that variable is an instance of the column() API from this code:

             this.api()
                 .columns()
                 .every(function () {
                     var that = this;
  

  I wonder how I can control it?

  What specifically do you want to control?

  It would help for you to explain the problem you are trying to solve.

  Kevin
• yshtil Posts: 17Questions: 6Answers: 0

  September 2022

  I have a global search box and one per column search boxes.
  I want the following:

  1. If RETURN is pressed in the global search box, I want ALL column searched with the value in this box, ignoring the values in all other boxes
  2. If return is pressed in a column search box, I want THIS column only searched with the corresponding value, ignoring all other search boxes.
  3. A also want to have a columns search box (I know how to create it) and when RETURN is pressed there, I want all columns searched with the values in the respective boxes ignoring the global search box.

  I use server side processing and one request per one press of RETURN should go to the server.

  Also, I want to thank you for all the time spent and attention you pay to my ignorant questions!!!
• kthorngren Posts: 20,452Questions: 26Answers: 4,802

  September 2022 edited September 2022

  If RETURN is pressed in the global search box, I want ALL column searched with the value in this box, ignoring the values in all other boxes

  You will need to create you own search input or remove the Datatables event handler and create your own like this example:
  http://live.datatables.net/kiwoxuma/46/edit

  As I said before use columns().search with an empty string to clear all the column searches, like this table.columns().search("");. You will need to also clear the text inputs as Datatables knows nothing about these.

  If return is pressed in a column search box, I want THIS column only searched with the corresponding value, ignoring all other search boxes.

  you will need to clear all the column searches as described above then use column().search() for the column you want.

  A also want to have a columns search box (I know how to create it) and when RETURN is pressed there, I want all columns searched with the values in the respective boxes ignoring the global search box.

  Use search() with an empty string to clear the global search.

  Kevin
• yshtil Posts: 17Questions: 6Answers: 0

  September 2022

  Thank you very much.

  One more question about
  "You will need to also clear the text inputs as Datatables knows nothing about these."

  I wonder how do I do this?
• yshtil Posts: 17Questions: 6Answers: 0

  September 2022

  I found a solution, here is the code that handles what I need:

          var users_table = $('#usersData').DataTable( {
              initComplete: function () {
                  var top_this = this;
                  // Apply the search
                  this.api()
                      .columns()
                      .every(function () {
                          var that = this;
                          
                          $('input', this.footer()).on('keypress', function (e) {
                              if ((e.key === "Enter") && (that.search() !== this.value)) {
                                  var saved_val = this.value;
                                  users_table.search(""); // Clear global search
                                  users_table.columns().search(""); // Clear all searches
                                  // Clear all inputs
                                  top_this.api().columns().every(function() {
                                      var input = $('input', this.footer());
                                      input.val('');
                                  });
                                  // Restore value of this
                                  this.value = saved_val;
                                  that.search(this.value).draw();
                              }
                          });
                      });
              },
              search: {
                  "return": false
              },
              columnDefs: [
                  { targets: '_all', orderable: false },
              ],
              serverSide: true,
              processing: true,
              ajax: {
                  url: '/?table=users',
                  type: 'POST'
              }
          }
                                               );
  
          $('#usersData_filter input')
              .off()
              .on('keypress', function(e) {
                  if ((e.key === "Enter") && (users_table.search() !== this.value)) {
                      users_table.columns().search(""); // Clear all searches
                      // Clear all inputs
                      users_table.columns().every(function() {
                          var input = $('input', this.footer());
                          input.val('');
                      });
  
                      users_table.search(this.value).draw();
                  }
              });
  
              -  // Setup - add a text input to each footer cell
              $('#usersData tfoot th').each(function () {
                  var title = $(this).text();
                  $(this).html('<input type="search" placeholder="Search ' + title + '" />');
              });
  
  
• 19fany Posts: 7Questions: 1Answers: 0

  January 2023

  Hola una pregunta estoy en el mismo caso server side nome genera busquedas en los input que integre segui tu solucion pero nome los muestra no se si me podrias apoyar en mi duda
• kthorngren Posts: 20,452Questions: 26Answers: 4,802

  January 2023

  @19fany

  Hello, I have a question, I am in the same case, server side does not generate searches in the inputs that I integrated, I followed your solution but it does not show them, I do not know if you could help me with my doubt

  Are you saying that you aren't seeing the search inputs? 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