Jhanu uses jQuery Datatable to build its tables. You can have a better documentation on https://datatables.net/

How to replace columns data

You can replace the content of the columns obtained by the query. For example, if the query was:

SELECT claveid, clave, peso_basico_clave, pvta_k_cr, pvta_k_ct, pvta_k_lsf FROM ivis_costos ORDER BY claveid

I can override the display of the last three columns as follows (pvta_k_cr, pvta_k_ct, pvta_k_lsf are columns names gotten from the SQL sentence) :

{
 "pvta_k_cr": " render: function (data, type, row) { return '$ ' + formatNumber(data);}",
 "pvta_k_ct": " render: function (data, type, row) { return '$ ' + formatNumber(data);}",
 "pvta_k_lsf": " render: function (data, type, row) { return '$ ' + formatNumber(data);}"
}

where formatNumber() is a javascript function that allows you to format the value as a number:

function formatNumber(toFormat) {
    return toFormat.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

How to add columns

More columns can be added using the number as the column id. For example, if the Query use was:

SELECT
  public.jnu_users.id,
  public.jnu_users.name,  
  public.jnu_users.email,
  public.acom_userprefs.doctype,
  public.acom_userprefs.docid,
  public.acom_userprefs.birthdate,
  public.acom_servicesconf.usertype,  
  public.acom_userprefs.cellphone,
  public.dhylo_ciudades.nombre,
  public.acom_userprefs.sex,
  public.acom_userprefs.ranking
FROM
  public.jnu_users
  INNER JOIN public.acom_userprefs ON (public.jnu_users.id = public.acom_userprefs.userid)
  LEFT OUTER JOIN public.dhylo_ciudades ON (public.acom_userprefs.city = public.dhylo_ciudades.id)
  INNER JOIN acom_servicesconf ON (acom_servicesconf.userid = acom_userprefs.userid)
WHERE
  acom_servicesconf.usertype != 'GROUP'
  AND jnu_users.name IS NOT NULL
  AND publuc.jnu_users.site = ? ORDER BY id

I can add 4 more columns starting from position 2 to 6 and then continue with the columns defined by the SQL statement as follows (columns start from position 1):

{
  "2" : "<span onclick='referencias(this)' class='spanOption glyphicon glyphicon-user'  title='Referencias'></span>",
  "3" : "<span onclick='horario(this)' class='spanOption glyphicon glyphicon-time'  title='Horario'></span>",
  "4" : "<span onclick='servicios(this)' class='spanOption glyphicon glyphicon-th-list'  title='Servicios'></span>",
  "5" : "<span onclick='album(this)' class='spanOption glyphicon glyphicon-picture'  title='Fotos'></span>",
  "6" : "<span onclick='tarifas(this)' class='spanOption glyphicon glyphicon-usd'  title='Tarifas'></span>"
}

How to add an event when clicking on the column value

For this you must use the following methods

 var table = $('#proveedores').DataTable();
 var data = table.row($(obj).parents('tr')).data();

where #proveedores is the Id of the table (Defined in Variable Id). With the methods described above, data is an object that contains all the value of the columns obtained by the SQL statement. Using the SQL from the previous point, we could define the function as follows:

function referencias(obj){
    var table = $('#proveedores').DataTable();
    var data = table.row($(obj).parents('tr')).data();
    window.location = "../../ap/67-acom/67-referencias?userid=" + data.id;
}

Columns names internationalization

For internationalization in the columns names, use the word AS in the query and put the name of a label starting with the word i18n_

example:

SELECT id, titulo AS i18n_feria_subastas_titulo FROM feria_subastas WHERE usuariopublica = ?