search a column on a server back end...

luisrortega

So I added a search text per column on the header....

initComplete: function () {
                        this.api().columns().every( function () {
                            var column = this;
                            if(column.dataSrc()){
                              //var select = $('<select><option value=""></option></select>')
                              var select = $(search_fld);
                              select.appendTo(column.header());
                              select.on('keydown', function () {
                                  var val = $.fn.dataTable.util.escapeRegex(
                                      $(this).val()
                                  );
          
                                  column
                                      .search( val ? '^'+val+'$' : '', true, false )
                                      .draw();
                                  
                                  tbl_customers.ajax.reload(null,false); 
                              } );
                            }
                           
                        } );
                    },

I have the following situations...
1. I'm expecting the data table to pass the search value as a parameter to the back end... based on https://datatables.net/manual/server-side#Sent-parameters... however, this is not happening... it never populates this column search value.
2. When the user clicks the search to start typing, the click event is propagated to the "order column" event"
3. On my current code, the search is triggered per each character pressed. The default search on DataTables does some kind of "searchDelay" that wait for a period before sending the request to the server. How can I accomplish this?

Thanks,
Luis

luisrortega

I tried adding

select.on('click', function (e) {
                                e.preventDefault();
                              });

to avoid the click to propagate, but it still does.

luisrortega

Item one is fixed... I had 2 problems... no need for Regex (I copy that from another example, and was not need it at all)... and second I'm inserting a label with an input inside (for css reasons) "this" was sometimes the input, sometimes the lable... well the label have no value!

I'm still dealing with 2 and 3...

kthorngren

1. When the user clicks the search to start typing, the click event is propagated to the "order column" event"

You will need to use two header rows. One for the search inputs and the other for sorting. Something like this example:
http://live.datatables.net/dikuduka/1/edit

Note the use of -option orderCellsTop` to move the sorting to the top header.

1. On my current code, the search is triggered per each character pressed. The default search on DataTables does some kind of "searchDelay"

The searchDelay is not attached to you custom search inputs. Not sure how to attach a delay to your inputs but you could change the event trigger from keydown to change so you would have to hit enter.

Kevin

luisrortega

Thanks Kevin...

I struggle a little because the columns are passed as a parameter, and dt create a new row themselves... however you pointed me in the right direction... I created a dummy th with the search and attached the events later on.

I'll keep the case open in case someone knows how to deal with the timing issue!

Luis

luisrortega

Found a solution for the timing...

            let keyTmr = null;
            $('#tbl-customers-content > thead '  ).on( 'keyup','input',function () {   
              let inp = this;
              if (keyTmr) {
                window.clearTimeout(keyTmr);
              } 
              timer = window.setTimeout( function() {
                timer = null;
                let ind = inp.getAttribute("src_ind");
                tbl_customers
                    .column( ind )
                    .search( inp.value )
                    .draw();
                }, 750);
            });