This component was tested using a PHP API on the CodeIgniter framework. It can be extended to any programming language/framework.
4 different end-points are required:
- search to get the data for the table
- get for getting the fields for the form, as you may have different information to add/edit, compared to the main table. This also handlees deleting.
- edit for adding/editing from the main form
- inline for in-line editing and adding
The component can be edited for a more standard API quite easily. If you do this, create a branch with a PR, and test it, prior to pushing new code with your new component.
In the following examples, the segment of the URL (2nd part in this case) that says first is just to denote that this is the first part of the nested function, so that the server knows this. It doesn't mean you're looking at the first record or anything to that effect. It is purely to identity which operation we're looking at.
search/first/1/10/%20/0/2/DESC/
From segment 3, we have:
- Page number
- Items per page
- Search query
- Field to search on
- Column to sort on
- Sort order
In turn:
- Column headings
- Column headings - not used yet
- Date types - i.e. is this a date, dropdown etc
- Data types, not used yet
- Which column is the primary key
- Array of objects of data
- Data for dropdowns
- ignore
- Sums/counts
- Total pages
If, for example, you pass data that requires a dropdown, and this was the second element, your datatype array would have the 2nd element as s and in pre_fill, in the second element of the array, give an array of objects with 2 keys:
- val
- name <- This is what is actually displayed
IMPORTANT You will notice in the API that for the search, edit and inline endpoints, a parameter is expected for the nested tables, as follows:
edit/product/16307
This tells the server, that for a nested table, only search/return records that match 16307 on the related field in the nested table.
get/first/16307
Get the ID 16307 from the database and return the data. If -1 is supplied instead, the server will know a new record is being created.
A form is rendered, based on the following data:
This is quite similar to before. Ignore the keys ending in 2, they were used in my API so I could declare a group of variables towards the top of the page. The main thing here is the data is returned in row_data if it is an existing record, otherwise, the main purpose of this function is to get a list of fields for the form.
Remember, the reason for this is sometimes, your form may contain more [or less, though less likely] fields to edit.
An array is expected:
["veg food","hey","16307"]:
The last element here is the primary key, if it is empty, my API makes a new record, and the first two are data to be inserted. I use REPLACE in Codeigniter.
Again, the main thing here is the row_data that returns the information that was inserted.
This is a shortened edit/add function that can be used for operations performed without going to the form. Obviously, you can only edit items that are being shown on the table, for anything else, the user would use the full form.
The parameters and response are similar to the edit form, however, we do not need to return anything as upon editing/adding, the form will automatically be refreshed to reflect the new data added.
As of 10/09/2020, client-side validation, multi-select support, datetime support missing.