
The beef is here - the search function which is responsible of gathering user inputs, validation, clearing previous search results in the table, constructing search queries, sending out query requests, displaying returned results, and handling errors. To do this, we append "&init=true" parameter to the initial request's URL so the server side will know. The initial request is not triggered by our users.

We want to capture this initial request, and prevent the server side from starting any search work, because at this moment our user hasn't filled any search keywords in the text fields yet (First Name, Last Name, and Client ID text fields). When the table is created, the data table will send out an initial request to get data. Var formatName = function(elCell, oRecord, oColumn, oData) // sortName sort functionįormatter: formatAddress, // formatAddress column formatterįormatter: formatDate // formatDate column formatter Use column formatters for column name, date, and address. "address1", "address2", "address3", "city", "state", "zip" ]ĭefine table columns. address1, address2, address3, city, state, and zip properties.įields: [ "userId", "firstName", "lastName", "birthDate", Each result object has userId, firstName, lastName, birthDate,

The response JSON will have a results array More discussions about JSONP can be found here.įirst, let's define a ScriptNodeDataSource and response schema. One of the major advantages of the ScriptNodeDataSource is that its data requests can be sent across domains by using JSONP (JSON Padding) instead of XHR.

If any client record is found, we display the search results in a table on the same page.įor DataSource, I use ScriptNodeDataSource.
#Edit in macvim service how to
In this article, I will demonstrate how to use YUI DataTable and DataSource to create a page that lets users search client records by client's first name, last name, and ID.
