Adding text to the search input.

classic12

I have the following scenario

I have a Main Customer datatable.
When I click on a row It runs the following

$('#dtCustomers').on( 'select.dt', function ( e, dt, type, indexes ) {

      selectedCustomerID = tableCustomers.cell('.selected', 0).data();

          if (currentCustomerID !== selectedCustomerID )
            {
                getInvoices();
                getContacts();
                getCalls();
                currentCustomerID = selectedCustomerID;
                selectedCompanyName = tableCustomers.cell('.selected', 1).data();
                selectedAddress1 = tableCustomers.cell('.selected', 8).data();
                selectedAddress2 = tableCustomers.cell('.selected', 9).data();
                selectedAddress3 = tableCustomers.cell('.selected', 10).data();
                selectedTown = tableCustomers.cell('.selected', 11).data();
                selectedPostCode = tableCustomers.cell('.selected', 12).data();
                
                selectedDocType = 'Invoice';
            }
     } );

This then populates / filters the other tables.

I have another datatable which lists all the invoices and it allows me to find an invoice by number and select it for printing / amdending.

When I click on this I want 'action' the above.

I have

    $('#dtAllInvoices tbody').on( 'click', '.getInvoice', function () {

    var tr = $(this).closest('tr');    
        if ( $(tr).hasClass('child') ) {
        tr = $(tr).prev();  
    }
        var data2 = [tableAllInvoices.row( tr ).data()];
        
        selectedCustomerID = data2[0].invoice.CustID;
        selectedInvoiceID = data2[0].invoice.InvID;
        currentCustomerID = 0;
        console.log('selectedCustomerID = '+ selectedCustomerID);
        tableCustomers.columns( 0 ).search( selectedCustomerID ).draw();
        
        ChangeForm(Form1, "fade", "fade", 500);

                
                $('#dtCustomers tbody tr:eq(0) td:eq(0)').click(); 
                tableInvoices.columns( 0 ).search( selectedInvoiceID ).draw();
                
                selectedDocType = 'Invoice';

}); 


}

So I get the Customer datatable filtered to one customer
The click works and repopulates everything
And the Invoice table is filtered to the selected invoice number.

The only issue is the customer datatable has only one row and I need a 'reset the search' button.
( what is the syntax to clear search ?).

A better approach would be instead of

tableCustomers.columns( 0 ).search( selectedCustomerID ).draw();

populate the search input with the company name so I can then clear the search box when finished.

So how do I populate the search input with text and trigger it ?

Cheers

Steve Warby

allan

An empty string as the search term for column().search() is how to clear a search term.

However, you might want to listen for the deselect event and clear the filter in a similar way that it was initially filled in.

Allan

rf1234

syntax to clear search: table.search('').draw();

What you should also consider is using $.fn.dataTable.ext.search.push for custom filtering. It also works with multiple data tables on one page. Datatables runs through the code for each data table on the page. To make sure only the applicable code for the respective table is being executed you need to check for "undefined". In this example filtering of child tables is depending on whether or not a record in a parent table was selected. I think this code needs to be placed above the data tables.

$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex, row, counter) {
        //we only look for the contract table
        //all current contracts are displayed; expired can be selected
        //by month ago
        if (typeof row.contract !== 'undefined') {
            if (row.contract.expired > '0') {
                .... do something and return false or true
            }
        } else {
            var selected = contractTable.row({selected: true});
            if (selected.any()) {
                if (selected.data().contract.prolongation > '0') {
                    if ( typeof row.variable !== 'undefined' && 
                         typeof row.cashflow === 'undefined'    ) {
                        .... do something and return false or true
                    } else {
                        if ( typeof row.fixed !== 'undefined'&& 
                             typeof row.cashflow === 'undefined'  ) {
                           .... do something and return false or true
                        }
                    }
                }
            }
        }
        return true;
    }
);

This shows a different way of using it:
https://datatables.net/manual/plug-ins/search#Example

classic12

Is there simply a way to programically add text to the search input and perform the search.

This would allow the client to see that there is text in the search input then empty it when needed.

allan

A little jQuery would be all that is needed:

$('#myInput').val( ... ).change();

That is assuming that you have a change event listener that will trigger whatever search you want of course.

Allan

classic12

I’d need to do some thing like www.surplussnywhere.com?search=keyboards

Then goto the search page wait till the table has loaded then add the search text.

allan

Do you mean you want to use the search parameter from the URL in the input? Use search to set a default search in DataTables. See the MDN documentation for how to get the query string parameter from the location object.