datatable with html content

Question

I am using jquery datatable and data input injson format.

$('#newItemBasketTab').dataTable({
  "aaData": result.itembasketdata,
  "aoColumns": 
  [
     {"mDataProp": "nic5dcodename"},
     {"mDataProp": "asiccprodcodename"},
     {"mDataProp": "unit_name"},
     {"mDataProp": "prod_quantity"},
     {"mDataProp": "prod_value"}
  ]
});

Now I want to place a checkbox in first column of datatable and based on an ID field in json data, the checkbox needs to be checked or unchecked. Is it possible to add html content to datatable?

Amar Kamthe · Accepted Answer · 2015-06-01 06:29:38Z

1

You code will look like,

$('#newItemBasketTab').dataTable({
  "aaData": result.itembasketdata,
  "aoColumns": 
  [
     {"mDataProp": "Selection", 
      "fnRender":function(obj, type){
                   if(obj.aData['ID'])
                        return "<input type='checkbox' checked='checked'>"
                   else
                        return "<input type='checkbox'>"
                 }
     }
     {"mDataProp": "nic5dcodename"},
     {"mDataProp": "asiccprodcodename"},
     {"mDataProp": "unit_name"},
     {"mDataProp": "prod_quantity"},
     {"mDataProp": "prod_value"}
  ]
});

You can add any html code that you want to display in fnRender function

answered Jun 1, 2015 at 6:29

Amar Kamthe

2,5822 gold badges17 silver badges25 bronze badges

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

Comments

Sougata Bose · Accepted Answer · 2015-06-01 07:39:20Z

0

Use mrender property -

$('#newItemBasketTab').dataTable({
  "aaData": result.itembasketdata,
  "aoColumnDefs": [
    {
      "aTargets": [ 0 ],
      "mData": "ID",
      "mRender": function ( data, type, full ) {
        var checked = "checked";
        if(data) { checked = "checked"; }
        return "<input type='checkbox' checked='" + checked + "'>";
      }
    },
    {"mData": "nic5dcodename"},
    {"mData": "asiccprodcodename"},
    {"mData": "unit_name"},
    {"mData": "prod_quantity"},
    {"mData": "prod_value"}
  ]
});

DOCS

edited Jun 1, 2015 at 7:39

answered Jun 1, 2015 at 6:36

Sougata Bose

31.8k8 gold badges52 silver badges89 bronze badges

Collectives™ on Stack Overflow

datatable with html content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related