How can I group on a row that i Rendered into new Data?

timcadieux

I have a Date field which I extract the Month from a full date and am trying to Group on but the drawCallback Groups on the Date BEFORE its rendered into just a Month so all my Groups look like 1971-06-01T00:00:00

  "data": "OPEN_DT", "title": "Month", "targets": 3, "visible": false,
  "render": function (data, type, row)
 {
            return FormatDateMonth(data);
  }



 "drawCallback": function (settings)
            {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                //GROUP by Month
                api.column(3, { page: 'current' }).data().each(function (group, i)
                {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="7" class="MonthHeader">' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });


function FormatDateMonth(d)
{
    var locale = (lang == 'en' ? "en-CA" : "fr-CA");
    var s = d.split('T');
    var dateVar = s[0];
    var d = new Date(dateVar);

    var month = d.getMonth() + 1;

    monthlong = d.toLocaleString(locale, { month: "long" });

    return monthlong
}

colin

Hi @timcadieux ,

This example here is doing what you want. The cell().render() method returns the rendered value for that cell, as opposed to the original data.

Cheers,

Colin

timcadieux

Unfortunately, after about 2 hours, I can't seem to figure out how to get my Column3 api code to instead use the Row api code instead?

 api.column(3, { page: 'current' }).data().each(function (group, i)
                {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="7" class="MonthHeader">' + group + '</td></tr>'
                        );
                        last = group;
                    }
                });

      this.api().rows({page:'current'}).every( function ( rowIdx, tableLoop, rowLoop ) {
        console.log("ROW " + rowLoop + ": [" + this.data()[0] + "] [" + this.cell(rowIdx, 0).render('display') + "]");
      }); 

kthorngren

Try this:

     this.api().rows({page:'current'}).every( function ( rowIdx, tableLoop, rowLoop ) {
       console.log("ROW " + rowLoop + ": [" + this.data().OPEN_DT + "] [" + this.cell(rowIdx, 3).render('display') + "]");
     });

Since you are using data objects you need to get the data using the object key (this.data().OPEN_DT) and you will want to change the column selector from 0 to 3 in the cell() method (this.cell(rowIdx, 3).render('display')).

Not sure if that's answering your question.

Kevin

timcadieux

You're correct in that (this.cell(rowIdx, 3).render('display')) does render May instead of 2018-05-01
but how can I use this code to Group by this data, in order to Group, I have to do an api via column call...whereas the code for render(display) is by row...how can I put them together?

//GROUP by Month
api.column(3, { page: 'current' }).data().each(function (group, i)
{
    if (last !== group) {
        $(rows).eq(i).before(
            '<tr class="group"><td colspan="7" class="MonthHeader">' + group + '</td></tr>'
         //this.api().rows({page:'current'}).every( function ( rowIdx, tableLoop, rowLoop ) {
         //console.log("ROW " + rowLoop + ": [" + this.data().OPEN_DT + "] [" + this.cell(rowIdx, 3).render('display') + "]");
         //});
        );
        last = group;
    }
});

kthorngren

You don't want to combine the two. You just want to use what Colin provided. I put that into an example to group be rendered data:
http://live.datatables.net/xuwozulu/1/edit

Kevin

timcadieux

Oh wow, I never would have gotten that. duh!

Thx you all for your help!