How to select column to search on server side

yshtil

I have a table with several columns and server side processing. By default the table shows only one search text box.
I wonder, how to implement a feature so that I can select columns to search. Ideally, I want to have a separate search box for each column.

kthorngren

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

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

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

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

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

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

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

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

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

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

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

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

@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