Adding text to the search input.
Adding text to the search input.
classic12
Posts: 228Questions: 60Answers: 4
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
Answers
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
deselectevent and clear the filter in a similar way that it was initially filled in.Allan
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.
This shows a different way of using it:
https://datatables.net/manual/plug-ins/search#Example
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.
A little jQuery would be all that is needed:
That is assuming that you have a
changeevent listener that will trigger whatever search you want of course.Allan
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.
Do you mean you want to use the
searchparameter from the URL in the input? Usesearchto set a default search in DataTables. See the MDN documentation for how to get the query string parameter from thelocationobject.