How to format / customize data in table columns using datatables server processing?

The problem is pretty simple. When using basic datatables server processing initialization, only plain text is displayed on the page. Rather, it is EXACTLY ONLY what is in the database columns in the table columns without additional HTML formatting.

Example: Here is the img of what the HTML and CSS text looks like - http://i.imgur.com/li2UMI7.png . Each column of the table has its own style / format. Now, when processing the server datatables makes a request to the server / database, the results, as I said, are exactly the same as in the database. So in order to get this format as shown above, I have to put the HTML inside the database. IE:

 <span class="label label-danger">Tag</span> 

or

 <span class="label bg-color-greenDark">Category Label</span> 

How can I format the results retrieved from the database and into table columns on the page? I would prefer to put only the tag in the tag column, and not the entire HTML tag that comes with it.

Is there a way to intercept the results before hitting the page, format them, and then publish to the page?

CODE:

 $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "scripts/server_processing.php", "columnDefs": [ { "data": "firstname", //this name should exist in you response JSON "render": function ( data, type, full, meta ) { return '<span class="label label-danger">'+data+'</span>'; } } ] } ); } ); 
+5
source share
1 answer

use the render parameter in the column, something like this:

 $('#example').dataTable( { "columnDefs": [ { "targets": 0,//index of column starting from 0 "data": "column_name", //this name should exist in your JSON response "render": function ( data, type, full, meta ) { return '<span class="label label-danger">'+data+'</span>'; } } ] } ); 

check out the docs here: columns.render data table .
Use data to match the property / key of the source object / array. Read the document
Use targets if you are not using any keys. Read the document

+8
source

Source: https://habr.com/ru/post/1215462/


All Articles