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

Multi tool use
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
add a comment |
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
add a comment |
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
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
javascript asp.net-mvc
edited Jan 2 at 11:56
Juan du Toit
asked Jan 2 at 11:36
Juan du ToitJuan du Toit
165
165
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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;
}
}
});
},
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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;
}
}
});
},
add a comment |
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;
}
}
});
},
add a comment |
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;
}
}
});
},
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;
}
}
});
},
answered Jan 3 at 11:57
Juan du ToitJuan du Toit
165
165
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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