How to group a datatable by a column after it has been initialized

Multi tool use
Multi tool use












1















So currently i have a datatable that displays alot of timesheets for alot of files, i need to create a function that will group all the data by their respected files, but all example that i have found do this in the initialization of the datatable but i need to do this with a custom created button and fail to find any examples or documentation on how to do it this way



The code will just create a table but i would like to have a button with a value "Group Items" then after the button is clicked it should group all by file



$('#data-table-timesheet').DataTable({
ajax: {
url: '@Url.Action("GetTimeSheets", "Home")',
data: function (d) {
d.from = $("#DateStart").data('datepicker').getFormattedDate('yyyy-MM-dd'),
d.to = $("#DateEnd").data('datepicker').getFormattedDate('yyyy-MM-dd'),
d.partyId = parseInt($("#UserId").val())
},
dataSrc: 'Data'
},
"footerCallback": function (row, data, start, end, display) {
var api = this.api(), data;

// Remove the formatting to get integer data for summation
var intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};

// Total over all pages
total = api
.column(8, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);

// Total over this page

pageTotal = api
.column(7, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);

// Update footer
$(api.column(7).footer()).html(
'R' + parseInt(pageTotal).toFixed(2)
);

pageTotal = api
.column(8, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);

// Update footer
$(api.column(8).footer()).html(
'R' + parseInt(pageTotal).toFixed(2)
);

var uTotal = api
.cells(function (index, data, node) {
if (api.row(index).data().LastModified == null && api.row(index).data().timelogId != null) {
return true;
}
else {
return false;
}
}, 6, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);

var cTotal = api
.cells(function (index, data, node) {
if (api.row(index).data().LastModified != null && api.row(index).data().timelogId != null || api.row(index).data().timelogId == null && parseInt(api.row(index).data().rateTotal) > 0) {
return true;
}
else {
return false;
}
}, 6, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);

$(api.column(6).footer()).html(
"C(" + parseInt(cTotal).toFixed(0).toString().secondsToHHMMSS() + ")" + "<br/> U(" + parseInt(uTotal).toFixed(0).toString().secondsToHHMMSS() + ")"
);
},
"columns": [
{
"data": "isJoined",
"render": function (data, type, row) {
if (row.isJoined == 1) {
return '<i class="fa fa-fw f-s-10 m-r-5 fa-circle text-primary"></i>';
}
else {
return "";
}
}
},
{
"data": "StartDate",
"render": function (data, type, row) {
return moment(data).format("YYYY-MM-DD HH:mm").toString().trim();
}
},
{
"data": "EndDate",
"render": function (data, type, row) {
return moment(data).format("YYYY-MM-DD HH:mm");
}
},
{ "data": "fileRef" },
{ "data": "CategoryName" },
{ "data": "Notes" },
{
"data": "BillableMinutes",
"render": function (data, type, row) {
if (row.rateTotal > 0 ) {
return data.toString().secondsToHHMMSS();
}
else {
var x = (data / 60);
return x.toFixed(2);
}

}
},
{ "data": "rateTotal" },
{ "data": "disbursementTotal" }
],
"createdRow": function (row, data, dataIndex) {

if (data.LastModified == null && data.timelogId != null) {
$(row).addClass('redClass');
}
},
"deferRender": true,
autoWidth: false,
bAutoWidth: false,
dom: 'Bfrtip',
paging: false,
select: true,
responsive: true,
select: {
style: 'multi'
},
buttons: [
{ extend: 'copyHtml5', footer: true },
{ extend: 'excelHtml5', footer: true },
{ extend: 'csvHtml5', footer: true },
{ extend: 'pdfHtml5', footer: true }
],
columnDefs: [
{
targets: 5,
render: $.fn.dataTable.render.ellipsis(50, true, true)
},
{ "width": "5px", "targets": 0 },
{ "width": "135px", "targets": 1 },
{ "width": "135px", "targets": 2 },
{ "width": "1px", "targets": 3 },
{ "width": "1px", "targets": 4 },
{ "width": "400px", "targets": 5 },
{ "width": "2px", "targets": 6 },
{ "width": "1px", "targets": 7 },
{ "width": "1px", "targets": 8 }
]
});


The below listed code is how i do row grouping when the datatable is initialized, but i need to have this in a seperate button so when the user clicks the button it would only group then



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

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

last = group;
}
});
},









share|improve this question





























    1















    So currently i have a datatable that displays alot of timesheets for alot of files, i need to create a function that will group all the data by their respected files, but all example that i have found do this in the initialization of the datatable but i need to do this with a custom created button and fail to find any examples or documentation on how to do it this way



    The code will just create a table but i would like to have a button with a value "Group Items" then after the button is clicked it should group all by file



    $('#data-table-timesheet').DataTable({
    ajax: {
    url: '@Url.Action("GetTimeSheets", "Home")',
    data: function (d) {
    d.from = $("#DateStart").data('datepicker').getFormattedDate('yyyy-MM-dd'),
    d.to = $("#DateEnd").data('datepicker').getFormattedDate('yyyy-MM-dd'),
    d.partyId = parseInt($("#UserId").val())
    },
    dataSrc: 'Data'
    },
    "footerCallback": function (row, data, start, end, display) {
    var api = this.api(), data;

    // Remove the formatting to get integer data for summation
    var intVal = function (i) {
    return typeof i === 'string' ?
    i.replace(/[$,]/g, '') * 1 :
    typeof i === 'number' ?
    i : 0;
    };

    // Total over all pages
    total = api
    .column(8, { page: 'current' })
    .data()
    .reduce(function (a, b) {
    return intVal(a) + intVal(b);
    }, 0);

    // Total over this page

    pageTotal = api
    .column(7, { page: 'current' })
    .data()
    .reduce(function (a, b) {
    return intVal(a) + intVal(b);
    }, 0);

    // Update footer
    $(api.column(7).footer()).html(
    'R' + parseInt(pageTotal).toFixed(2)
    );

    pageTotal = api
    .column(8, { page: 'current' })
    .data()
    .reduce(function (a, b) {
    return intVal(a) + intVal(b);
    }, 0);

    // Update footer
    $(api.column(8).footer()).html(
    'R' + parseInt(pageTotal).toFixed(2)
    );

    var uTotal = api
    .cells(function (index, data, node) {
    if (api.row(index).data().LastModified == null && api.row(index).data().timelogId != null) {
    return true;
    }
    else {
    return false;
    }
    }, 6, { page: 'current' })
    .data()
    .reduce(function (a, b) {
    return intVal(a) + intVal(b);
    }, 0);

    var cTotal = api
    .cells(function (index, data, node) {
    if (api.row(index).data().LastModified != null && api.row(index).data().timelogId != null || api.row(index).data().timelogId == null && parseInt(api.row(index).data().rateTotal) > 0) {
    return true;
    }
    else {
    return false;
    }
    }, 6, { page: 'current' })
    .data()
    .reduce(function (a, b) {
    return intVal(a) + intVal(b);
    }, 0);

    $(api.column(6).footer()).html(
    "C(" + parseInt(cTotal).toFixed(0).toString().secondsToHHMMSS() + ")" + "<br/> U(" + parseInt(uTotal).toFixed(0).toString().secondsToHHMMSS() + ")"
    );
    },
    "columns": [
    {
    "data": "isJoined",
    "render": function (data, type, row) {
    if (row.isJoined == 1) {
    return '<i class="fa fa-fw f-s-10 m-r-5 fa-circle text-primary"></i>';
    }
    else {
    return "";
    }
    }
    },
    {
    "data": "StartDate",
    "render": function (data, type, row) {
    return moment(data).format("YYYY-MM-DD HH:mm").toString().trim();
    }
    },
    {
    "data": "EndDate",
    "render": function (data, type, row) {
    return moment(data).format("YYYY-MM-DD HH:mm");
    }
    },
    { "data": "fileRef" },
    { "data": "CategoryName" },
    { "data": "Notes" },
    {
    "data": "BillableMinutes",
    "render": function (data, type, row) {
    if (row.rateTotal > 0 ) {
    return data.toString().secondsToHHMMSS();
    }
    else {
    var x = (data / 60);
    return x.toFixed(2);
    }

    }
    },
    { "data": "rateTotal" },
    { "data": "disbursementTotal" }
    ],
    "createdRow": function (row, data, dataIndex) {

    if (data.LastModified == null && data.timelogId != null) {
    $(row).addClass('redClass');
    }
    },
    "deferRender": true,
    autoWidth: false,
    bAutoWidth: false,
    dom: 'Bfrtip',
    paging: false,
    select: true,
    responsive: true,
    select: {
    style: 'multi'
    },
    buttons: [
    { extend: 'copyHtml5', footer: true },
    { extend: 'excelHtml5', footer: true },
    { extend: 'csvHtml5', footer: true },
    { extend: 'pdfHtml5', footer: true }
    ],
    columnDefs: [
    {
    targets: 5,
    render: $.fn.dataTable.render.ellipsis(50, true, true)
    },
    { "width": "5px", "targets": 0 },
    { "width": "135px", "targets": 1 },
    { "width": "135px", "targets": 2 },
    { "width": "1px", "targets": 3 },
    { "width": "1px", "targets": 4 },
    { "width": "400px", "targets": 5 },
    { "width": "2px", "targets": 6 },
    { "width": "1px", "targets": 7 },
    { "width": "1px", "targets": 8 }
    ]
    });


    The below listed code is how i do row grouping when the datatable is initialized, but i need to have this in a seperate button so when the user clicks the button it would only group then



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

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

    last = group;
    }
    });
    },









    share|improve this question



























      1












      1








      1








      So currently i have a datatable that displays alot of timesheets for alot of files, i need to create a function that will group all the data by their respected files, but all example that i have found do this in the initialization of the datatable but i need to do this with a custom created button and fail to find any examples or documentation on how to do it this way



      The code will just create a table but i would like to have a button with a value "Group Items" then after the button is clicked it should group all by file



      $('#data-table-timesheet').DataTable({
      ajax: {
      url: '@Url.Action("GetTimeSheets", "Home")',
      data: function (d) {
      d.from = $("#DateStart").data('datepicker').getFormattedDate('yyyy-MM-dd'),
      d.to = $("#DateEnd").data('datepicker').getFormattedDate('yyyy-MM-dd'),
      d.partyId = parseInt($("#UserId").val())
      },
      dataSrc: 'Data'
      },
      "footerCallback": function (row, data, start, end, display) {
      var api = this.api(), data;

      // Remove the formatting to get integer data for summation
      var intVal = function (i) {
      return typeof i === 'string' ?
      i.replace(/[$,]/g, '') * 1 :
      typeof i === 'number' ?
      i : 0;
      };

      // Total over all pages
      total = api
      .column(8, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      // Total over this page

      pageTotal = api
      .column(7, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      // Update footer
      $(api.column(7).footer()).html(
      'R' + parseInt(pageTotal).toFixed(2)
      );

      pageTotal = api
      .column(8, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      // Update footer
      $(api.column(8).footer()).html(
      'R' + parseInt(pageTotal).toFixed(2)
      );

      var uTotal = api
      .cells(function (index, data, node) {
      if (api.row(index).data().LastModified == null && api.row(index).data().timelogId != null) {
      return true;
      }
      else {
      return false;
      }
      }, 6, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      var cTotal = api
      .cells(function (index, data, node) {
      if (api.row(index).data().LastModified != null && api.row(index).data().timelogId != null || api.row(index).data().timelogId == null && parseInt(api.row(index).data().rateTotal) > 0) {
      return true;
      }
      else {
      return false;
      }
      }, 6, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      $(api.column(6).footer()).html(
      "C(" + parseInt(cTotal).toFixed(0).toString().secondsToHHMMSS() + ")" + "<br/> U(" + parseInt(uTotal).toFixed(0).toString().secondsToHHMMSS() + ")"
      );
      },
      "columns": [
      {
      "data": "isJoined",
      "render": function (data, type, row) {
      if (row.isJoined == 1) {
      return '<i class="fa fa-fw f-s-10 m-r-5 fa-circle text-primary"></i>';
      }
      else {
      return "";
      }
      }
      },
      {
      "data": "StartDate",
      "render": function (data, type, row) {
      return moment(data).format("YYYY-MM-DD HH:mm").toString().trim();
      }
      },
      {
      "data": "EndDate",
      "render": function (data, type, row) {
      return moment(data).format("YYYY-MM-DD HH:mm");
      }
      },
      { "data": "fileRef" },
      { "data": "CategoryName" },
      { "data": "Notes" },
      {
      "data": "BillableMinutes",
      "render": function (data, type, row) {
      if (row.rateTotal > 0 ) {
      return data.toString().secondsToHHMMSS();
      }
      else {
      var x = (data / 60);
      return x.toFixed(2);
      }

      }
      },
      { "data": "rateTotal" },
      { "data": "disbursementTotal" }
      ],
      "createdRow": function (row, data, dataIndex) {

      if (data.LastModified == null && data.timelogId != null) {
      $(row).addClass('redClass');
      }
      },
      "deferRender": true,
      autoWidth: false,
      bAutoWidth: false,
      dom: 'Bfrtip',
      paging: false,
      select: true,
      responsive: true,
      select: {
      style: 'multi'
      },
      buttons: [
      { extend: 'copyHtml5', footer: true },
      { extend: 'excelHtml5', footer: true },
      { extend: 'csvHtml5', footer: true },
      { extend: 'pdfHtml5', footer: true }
      ],
      columnDefs: [
      {
      targets: 5,
      render: $.fn.dataTable.render.ellipsis(50, true, true)
      },
      { "width": "5px", "targets": 0 },
      { "width": "135px", "targets": 1 },
      { "width": "135px", "targets": 2 },
      { "width": "1px", "targets": 3 },
      { "width": "1px", "targets": 4 },
      { "width": "400px", "targets": 5 },
      { "width": "2px", "targets": 6 },
      { "width": "1px", "targets": 7 },
      { "width": "1px", "targets": 8 }
      ]
      });


      The below listed code is how i do row grouping when the datatable is initialized, but i need to have this in a seperate button so when the user clicks the button it would only group then



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

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

      last = group;
      }
      });
      },









      share|improve this question
















      So currently i have a datatable that displays alot of timesheets for alot of files, i need to create a function that will group all the data by their respected files, but all example that i have found do this in the initialization of the datatable but i need to do this with a custom created button and fail to find any examples or documentation on how to do it this way



      The code will just create a table but i would like to have a button with a value "Group Items" then after the button is clicked it should group all by file



      $('#data-table-timesheet').DataTable({
      ajax: {
      url: '@Url.Action("GetTimeSheets", "Home")',
      data: function (d) {
      d.from = $("#DateStart").data('datepicker').getFormattedDate('yyyy-MM-dd'),
      d.to = $("#DateEnd").data('datepicker').getFormattedDate('yyyy-MM-dd'),
      d.partyId = parseInt($("#UserId").val())
      },
      dataSrc: 'Data'
      },
      "footerCallback": function (row, data, start, end, display) {
      var api = this.api(), data;

      // Remove the formatting to get integer data for summation
      var intVal = function (i) {
      return typeof i === 'string' ?
      i.replace(/[$,]/g, '') * 1 :
      typeof i === 'number' ?
      i : 0;
      };

      // Total over all pages
      total = api
      .column(8, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      // Total over this page

      pageTotal = api
      .column(7, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      // Update footer
      $(api.column(7).footer()).html(
      'R' + parseInt(pageTotal).toFixed(2)
      );

      pageTotal = api
      .column(8, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      // Update footer
      $(api.column(8).footer()).html(
      'R' + parseInt(pageTotal).toFixed(2)
      );

      var uTotal = api
      .cells(function (index, data, node) {
      if (api.row(index).data().LastModified == null && api.row(index).data().timelogId != null) {
      return true;
      }
      else {
      return false;
      }
      }, 6, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      var cTotal = api
      .cells(function (index, data, node) {
      if (api.row(index).data().LastModified != null && api.row(index).data().timelogId != null || api.row(index).data().timelogId == null && parseInt(api.row(index).data().rateTotal) > 0) {
      return true;
      }
      else {
      return false;
      }
      }, 6, { page: 'current' })
      .data()
      .reduce(function (a, b) {
      return intVal(a) + intVal(b);
      }, 0);

      $(api.column(6).footer()).html(
      "C(" + parseInt(cTotal).toFixed(0).toString().secondsToHHMMSS() + ")" + "<br/> U(" + parseInt(uTotal).toFixed(0).toString().secondsToHHMMSS() + ")"
      );
      },
      "columns": [
      {
      "data": "isJoined",
      "render": function (data, type, row) {
      if (row.isJoined == 1) {
      return '<i class="fa fa-fw f-s-10 m-r-5 fa-circle text-primary"></i>';
      }
      else {
      return "";
      }
      }
      },
      {
      "data": "StartDate",
      "render": function (data, type, row) {
      return moment(data).format("YYYY-MM-DD HH:mm").toString().trim();
      }
      },
      {
      "data": "EndDate",
      "render": function (data, type, row) {
      return moment(data).format("YYYY-MM-DD HH:mm");
      }
      },
      { "data": "fileRef" },
      { "data": "CategoryName" },
      { "data": "Notes" },
      {
      "data": "BillableMinutes",
      "render": function (data, type, row) {
      if (row.rateTotal > 0 ) {
      return data.toString().secondsToHHMMSS();
      }
      else {
      var x = (data / 60);
      return x.toFixed(2);
      }

      }
      },
      { "data": "rateTotal" },
      { "data": "disbursementTotal" }
      ],
      "createdRow": function (row, data, dataIndex) {

      if (data.LastModified == null && data.timelogId != null) {
      $(row).addClass('redClass');
      }
      },
      "deferRender": true,
      autoWidth: false,
      bAutoWidth: false,
      dom: 'Bfrtip',
      paging: false,
      select: true,
      responsive: true,
      select: {
      style: 'multi'
      },
      buttons: [
      { extend: 'copyHtml5', footer: true },
      { extend: 'excelHtml5', footer: true },
      { extend: 'csvHtml5', footer: true },
      { extend: 'pdfHtml5', footer: true }
      ],
      columnDefs: [
      {
      targets: 5,
      render: $.fn.dataTable.render.ellipsis(50, true, true)
      },
      { "width": "5px", "targets": 0 },
      { "width": "135px", "targets": 1 },
      { "width": "135px", "targets": 2 },
      { "width": "1px", "targets": 3 },
      { "width": "1px", "targets": 4 },
      { "width": "400px", "targets": 5 },
      { "width": "2px", "targets": 6 },
      { "width": "1px", "targets": 7 },
      { "width": "1px", "targets": 8 }
      ]
      });


      The below listed code is how i do row grouping when the datatable is initialized, but i need to have this in a seperate button so when the user clicks the button it would only group then



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

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

      last = group;
      }
      });
      },






      javascript asp.net-mvc






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 2 at 11:56







      Juan du Toit

















      asked Jan 2 at 11:36









      Juan du ToitJuan du Toit

      165




      165
























          1 Answer
          1






          active

          oldest

          votes


















          1














          So after a few more days of searching the internet i have not found a solution, but instead i created a global variable of type bool, so when the datatable is drawn it looks in the drawcall back function to see if the global variable is set to true or not, and depending on the condition it will either group or not, so i draw the table everytime after the user has clicked the button that he/she would like to group



          "drawCallback": function (settings) {
          if(groupBy == true){

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

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

          last = group;
          }

          }

          });
          },





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005638%2fhow-to-group-a-datatable-by-a-column-after-it-has-been-initialized%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            So after a few more days of searching the internet i have not found a solution, but instead i created a global variable of type bool, so when the datatable is drawn it looks in the drawcall back function to see if the global variable is set to true or not, and depending on the condition it will either group or not, so i draw the table everytime after the user has clicked the button that he/she would like to group



            "drawCallback": function (settings) {
            if(groupBy == true){

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

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

            last = group;
            }

            }

            });
            },





            share|improve this answer




























              1














              So after a few more days of searching the internet i have not found a solution, but instead i created a global variable of type bool, so when the datatable is drawn it looks in the drawcall back function to see if the global variable is set to true or not, and depending on the condition it will either group or not, so i draw the table everytime after the user has clicked the button that he/she would like to group



              "drawCallback": function (settings) {
              if(groupBy == true){

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

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

              last = group;
              }

              }

              });
              },





              share|improve this answer


























                1












                1








                1







                So after a few more days of searching the internet i have not found a solution, but instead i created a global variable of type bool, so when the datatable is drawn it looks in the drawcall back function to see if the global variable is set to true or not, and depending on the condition it will either group or not, so i draw the table everytime after the user has clicked the button that he/she would like to group



                "drawCallback": function (settings) {
                if(groupBy == true){

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

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

                last = group;
                }

                }

                });
                },





                share|improve this answer













                So after a few more days of searching the internet i have not found a solution, but instead i created a global variable of type bool, so when the datatable is drawn it looks in the drawcall back function to see if the global variable is set to true or not, and depending on the condition it will either group or not, so i draw the table everytime after the user has clicked the button that he/she would like to group



                "drawCallback": function (settings) {
                if(groupBy == true){

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

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

                last = group;
                }

                }

                });
                },






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jan 3 at 11:57









                Juan du ToitJuan du Toit

                165




                165
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005638%2fhow-to-group-a-datatable-by-a-column-after-it-has-been-initialized%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    ttIbpKOPGj2YxDz6NyA5YDz
                    hEV4AYVzAu4tDRkIzOoBk WHPLepy2emeDMjugAzUErHmY

                    Popular posts from this blog

                    Monofisismo

                    Angular Downloading a file using contenturl with Basic Authentication

                    Olmecas