Fundamentals

Tabulator, the datatable

the tabulator datastructure

The initialization of tabulator is done by setting the html element to the tabulator library and transfering a configuration object. The object has the following parts:

many different configuration parameters
columns: the cloumn structure describe the layout of the columns
data: the data of the table
event functions

How I use tabulator

I load the data by Ajax and use the setdata() function:

tableTab.setData(url_readfilter,data_readfilter);

All coloumns get a headerfilter. All data columns are sortable. The first column is a html-column for the delete function. The formatter property allows to insert html-data.

The data is loaded after initialization or by entering a key in the header filter. With each key a request is send to the server. The actual filter is transmitted in the filter array:

filter
- [0]
  - field
  - type
  - value

The filter is build up in php and the fitting records are send back to the browser.

Tabulator website: tabulator.info

For more details about Tabulator, please have a look to:

Tabulator

Example for the datastructure

/* data is definded here with "tabledata" or by ajax
var tabledata = [
	{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
	{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
	{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
	{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
	{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
*/
var otable={
	ajaxFiltering:true,
	height:205, // set height of table (in CSS or here)
	/*data:tabledata, */ //assign data to table
	layout:"fitColumns", //fit columns to width of table (optional)
	rowClick:function(e, row){ //trigger an alert message when the row is clicked
		//alert("Row " + row.getData().id + " Clicked!!!!");
		for(var prop in oform.schema){
			document.getElementsByName(prop)[0].value=row.getData()[prop];
		}
	},
	dataFiltered:function(filters,rows){
		if(filters.length===0){
			console.log("filter empty!");
			return false;
		}else{
			console.log("filter not empty: ",filters);
		}
	}
}

//-------------------------------- Define Table Columns
//custom formatter definition
var printIcon = function(cell, formatterParams, onRendered){ //plain text value
	return "<i class=''>T</i>";
};
otable.columns=[
	{formatter:printIcon, height:"20px", width:20, align:"center", 
		cellClick:function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
	{title:"Name", field:"name", width:150, headerFilter:true, headerFilterLiveFilter:false,cssClass:"test"},
	{title:"Age", field:"age", align:"left", formatter:"progress"},
	{title:"Favourite Color", field:"col", headerFilter:true},
	{title:"Date Of Birth", field:"dob", sorter:"date", align:"center",headerFilter:true}
]

//create Tabulator on DOM element with id "example-table"
var table=$("#example-table");
var tableTab = new Tabulator("#example-table", otable);

//-------------------------------- tabledata by ajax
//tableTab.setData(tabledata);
tableTab.setData(url_readfilter,data_readfilter);
//fliter querysstring: ?filters[0][field]=name&filters[0][type]=like&filters[0][value]=b

jsonform on github

the jsonform datastructure

The initialization of tabulator is done by setting the html element to the jsonform library and transfering a configuration object. The object has the following parts:

schema: list of field objects with name, type, title, ...
form: array of the layout description
event functions

jsonform, how I use it

horizontal form
label-left
schema
- change the title
- required
- enum for select fields
- using step for decimal fields
form
- change appearance of the fields, like:
  - textarea, radio
- sections to get multiple blocks
- action for buttons

Attention, I modified the jsonform.js. A documentation is following later. Please use only the jsonform.js in this "download".

Look at the html of the form

The HTML result of the form can be displayed in the inspector of the browser (F12). There you also can mark and Copy / outer html. By pasting it in an editor, its all in one line. So take the htmlformatter to get a good-looking overview.

jsonform website

Please, have a look to

example for jsonform

Bootstrap, the famous css

bootstrap form, how I use it

Additional class for horizontal forms:

Add class .form-horizontal to the <form> element
Add class .control-label to all <label> elements

In regard to jsonform I am using Bootstrap 3 (v3.3.7).

example for horizonal form

Master data form, frontend and backend

Frontend, jQuery Plugin masterdata

The Master data Plugin builds up the Html structure for the master data form, joins the tabulator to the list and jsonform to the form.

You declare a "div" on your website and and call the function "displayMasterData" with the "id-selector" and the url for your form:

Backend, PHP data access

ProcessData.php

ProcessData.php gets all url-request from Javascript for the record handling and the datadefinitions.

PHP JSON: datadefinitions.php

The datadefinitions is declared in "BasicFunctions.php". You can call the datadefinition with the table name and the definition is created on the fly. The "column" part of the definition is important for the data access class.

BasicFunctions.php

PHP data access class

The data access class has the following methods:

__construct($datadefinition)
init()
bexist($ID)
bload($ID)
getEntries($clause)
bvalidate($postfields)
save()
add()
update()
delete($ID)