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

Question

The problem is pretty straight forward. When using the basic initialization of datatables server processing only plain text is displayed on the page. Rather, it pulls EXACTLY what is in the database columns into the table columns with no additional HTML formatting.

Example: Here is an img of what HTML and CSS formatted text looks like - https://i.sstatic.net/Cqf7B.png. Each column of the table has it's own styling/format. Now when datatables server processing makes a request to the server/database the results are, like I said, exactly as they are in the database. So in order to get this format as shown above I would have to put the HTML inside the database it self. IE:

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

or

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

How can I format the results being pulled from the database and into the table columns on the page? I would prefer to put only TAG in the tag column rather than the entire tag HTML that goes with it.

Is there a way to intercept the results before the hit the page, format them, then post to 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>';
            }
          } ]

    } );
} );

in your code, your table should have id="example" and will have only 1 column, is this right? — Kstro21
– Kstro21, Commented Mar 16, 2015 at 17:03

Kstro21 · Accepted Answer · 2015-03-16 18:05:16Z

11

use the render option 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 the docs here: DataTables columns.render.
Use data to match a property/key of a source object/array. Read the doc
Use targets if you are not using any keys. Read the doc

edited Mar 16, 2015 at 18:05

answered Mar 16, 2015 at 16:26

Kstro21

7,84114 gold badges65 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3870816 Over a year ago

Your answer was absolutely the right one. Thanks for the speedy reply.

user3870816 Over a year ago

I am having a bit of an issue getting it to work. This ofc is my own fault. I'm not the best with JS by any means. The code you presented me with will that work as is? I attempted to add it to me own code but am not sure what to alter. "data": "column_name", //this name should exist in you response JSON For 'column_name' is that the name of the column in datatables, in the database it self or neither? Somewhere else.

Kstro21 Over a year ago

this is just an example, this shouldn't work with your code. You need to modify data, this can be the same name of the column in your database as long as it is present in the response JSON you receive from the server, or in your initial data. Post an example of your initial data and your js code and i will help you.

user3870816 Over a year ago

I update the code in my main question body. As far as the initial data I am not sure what you mean by that. Not sure I understand where the response is either. In developer tools the json response is as follows: {"draw":1,"recordsTotal":300,"recordsFiltered":300,"data":[["Alleen Hieb","Alleen Hieb","5148"],["Alleen Hieb","Alleen Hieb","5198"],["Alleen Hieb","Alleen Hieb","5048"],["Alleen Hieb","Alleen Hieb","5248"],["Alleen Hieb","Alleen Hieb","5098"] Thanks for your help!

Kstro21 Over a year ago

If this is what you get from the server, then you cannot use data, use targets instead. I've updated my answer.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related