Table of whole input filed can't use input search

milly

I have a table,when user login, each column has a input, if not, columns are read-only.
When I search input value use example i found(individual column search input), it can't find a thing.
I guess it's because column().search() only accept string inside of td instead of input or other html tag?
My search function $(table.table().container()).on('keyup', 'thead tr.th_inp input', function () { table .column($(this).data('index')) .search(this.value) .draw(); });

allan

I'm happy to take a look at a test case showing the issue so I can debug it. Please post a link to a test case.

Allan

milly

Problems in this web:
1. Need both individual column search input & total search input (at the top right).
2. Use column Chamber as an example, when search "bk", works fine, but search " ", "b","k" etc., it doesn't work, maybe it's because it found the html attributes that belongs to input tag?
Here is the test: https://codepen.io/yi-wun-liu/pen/jENgyOE

allan

It seems to work for me:

but search " ", "b","k" etc., it doesn't work

I'm not sure what difference between "bk" and " ", "b", "k" is, other than the leading space, which doesn't make any difference, it gets trimmed.

However, yes, the input is going to cause you some difficulties. You'd need to make sure that you invalidate the data for the row if the user changes the value.

Allan

kthorngren

Here is an example of how to invalidate the changed cell data.
https://live.datatables.net/zukacehi/100/edit

Kevin

milly

In Chamber column when search "b", nothings changed, meanwhile search bar which in the top right, also shows "b", it's wired.

allan

Ah! Thank you for the clarification. That's because of:

                    let n_op = $.fn.dataTable.util.escapeRegex(this.value);
                    table
                        .column($(this).data('index'))   //from example and doesn't work.
                        .nodes()
                        .search(this.value)
                        .draw();

The nodes() in the middle is breaking the column chain and resulting in .search(this.value) being used as the global search, not column specific!

Remove .nodes() and that will help a little (at least stop the global search being populated).

However, because you are returning an HTML string from the rendering function for all data types, including search, that HTML is being used for the search! It has a b so all rows match. You can type input and get the same effect.

Adding:

                      if (type !== 'display') {
                        return d;
                      }

to the rendering function will address that: https://codepen.io/DataTables/pen/raamzgR .

It still doesn't account for invalidating data when the user types into the input though. See Kevin's reply for that.

Allan

milly

Thank you! It works. I put a console inside the if clause, want to check out how many types I have. All I got is filter type, why?
It should be 4 types.

                      if (type !== 'display') {
                        console.log(d + '_' + t);
                        return d;
                      }

kthorngren

There are four default orthogonal operations that will run through columns.render. The sort operation doesn't run until the column is sorted. Try sorting the column, do you see sort output now?

The type operation will run unless columns.type is set for the column. Do you have columns.type set? In most cases Datatables type detection should be used to set the column type. If you have columns.type likely you should remove it unless you are using a custom type.

Kevin

milly

Yes, I saw sort output now!
I don't have columns.type, I think I don't need it.
Thanks Allan & Kevin!