How to order with rendering ?

How to order with rendering ?

ziv@kpmbro.comziv@kpmbro.com Posts: 73Questions: 28Answers: 4
edited July 2017 in General

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 :)

Answers

  • HPBHPB Posts: 73Questions: 2Answers: 18
    edited July 2017

    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.comziv@kpmbro.com Posts: 73Questions: 28Answers: 4
    edited July 2017

    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

  • allanallan Posts: 54,909Questions: 1Answers: 8,606 Site admin

    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.comziv@kpmbro.com Posts: 73Questions: 28Answers: 4

    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 :)

  • allanallan Posts: 54,909Questions: 1Answers: 8,606 Site admin

    Do you mean like in this example?

    Allan

  • ziv@kpmbro.comziv@kpmbro.com Posts: 73Questions: 28Answers: 4
    edited July 2017

    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"
        }
      ]
    }
    
This discussion has been closed.