How to order with rendering ?

ziv@kpmbro.com

Hi Allan.

In my table i want to render a column, but after i do it i cant order by that column...

my code:

{
  "data": [
    {
      "blocked_clicks": "564",
      "clicks": "45431",
      "publisher_cost": "4"
    }
  ]
}

 $('#table').DataTable({
   "scrollX": true,
   lengthMenu: [
     [10, 25, 50, -1],
     ['10 rows', '25 rows', '50 rows', 'Show all']
   ],
   buttons: [
     'pageLength'
   ],
   "columnDefs": [{
     "targets": 2,
     "data": 'publisher_cost',
     "render": function(data, type, full, meta) {
       return ' <span class="input-group-btn"><button type="button" class="btn btn-green btn-xs">Save</button></span> <input type="text" value="' + data + '" class="form-control" placeholder="Search for..."> </div>';
     }
   }]
 });

How can i fix it?

Thanks

HPB

the columns.render function gives you the type.
So you can do:

if(type == 'display')
   return ' <span class="input-group-btn"><button type="button" class="btn btn-green btn-xs">Save</button></span> <input type="text" value="' + data + '" class="form-control" placeholder="Search for..."> </div>';
else
   return data;

ziv@kpmbro.com

can i set the type via the js or should i change the json?

i tried this:

{
  "data": [
    {
      "blocked_clicks": "564",
      "clicks": "45431",
          "publisher_cost": {
        "display": "4",
        "datasort": "4"
    }
    }
  ]
}


$('#table').DataTable({
          "scrollX": true,
          lengthMenu: [
            [10, 25, 50, -1],
            ['10 rows', '25 rows', '50 rows', 'Show all']
          ],
          buttons: [
            'pageLength'
          ],
          "columnDefs": [

          {
            "targets": 2,
            "data": 'publisher_cost',
            "render": {
                   _: 'display',
                   sort: 'datasort'
               }
          }
        ]
        });

and i tried this

 $('#table').DataTable({
   "scrollX": true,
   lengthMenu: [
     [10, 25, 50, -1],
     ['10 rows', '25 rows', '50 rows', 'Show all']
   ],
   buttons: [
     'pageLength'
   ],
 "columnDefs": [{
     "targets": 2,
     "data": 'publisher_cost',
     "render": function(data, type, full, meta) {
if(type == 'display')
   return ' <span class="input-group-btn"><button type="button" class="btn btn-green btn-xs">Save</button></span> <input type="text" value="' + data + '" class="form-control" placeholder="Search for..."> </div>';
else
   return data;
     }
   }]
 });

thanks dude

allan

Don't set the type option yourself. You should, in theory, never need to do that, and if you do, then there is a problem with the auto type detection.

Your second code block in the above post looks fine (where you check type == 'display'. There is detailed information about that available in the manual.

If you are still having problems with it, please link to a test case showing the issue.

Thanks,
Allan

ziv@kpmbro.com

Hi Allan im having a hard time with the jsfiddle ,
basically i want to sort on a renderd column.

the same table like this:
https://datatables.net/examples/data_sources/ajax.html

i want to make the Extn column to html input with the value inside, and still be able to sort on it...

Thanks man

allan

Do you mean like in this example?

Allan

ziv@kpmbro.com

Yes exactly,

do i must declare all the column even that i only render one or could i just use columnDefs for that specific one?
and if this a valid json for this situation?

{
  "data": [
    {
      "blocked_clicks": "564",
      "clicks": "45431",
      "publisher_cost": "4"
    }
  ]
}