Question

20

Datatable row grouping

rated 0 times [ 23] [ 3] / answers: 1 / hits: 21306 / 8 Years ago, thu, march 10, 2016, 12:00:00

I have a working datatable that is retrieving data from a file :

I want to group row, something like this :

https://datatables.net/examples/advanced_init/row_grouping.html

My goal would to have my datatable to look like this, grouping row by the date (last column), but even looking at the code, I have trouble to make it work. I'd like some help to make that work if you could.

Here is the code of my datatable :

$(document).ready(function() {

         $('#datatable').DataTable( {

         ajax: <?php echo base_url().assets/files/data/data.txt; ?> ,

         columns: [

            { data: etat },

            { data: dest },

            { data: message },

            { data: exp },

            { data: date }

            ],

            order: [[ 0, desc ]],

            responsive: true

            } );

         } );

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rickjordond

Add To Favorites

Follow

Total Points: 100

Total Questions: 105

Total Answers: 90

Location: Sweden

Member since Mon, May 8, 2023

1 Year ago

answered 8 Years ago parker · Accepted Answer

You should use drawCallback function.

Try.

$(document).ready(function() {

$('#datatable').DataTable({

columns: [

        { data: etat },

        { data: dest },

        { data: message },

        { data: exp },

        { data: date },

        { data: extra }

        ],

        order: [[ 4, desc ]],

        responsive: true,

        drawCallback: function (settings) {

            var api = this.api();

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

            var last = null;



            api.column(4, { page: 'current' }).data().each(function (group, i) {



                if (last !== group) {



                    $(rows).eq(i).before(

                        '<tr class=group><td colspan=8 style=BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;>' + 'GRUPO ....' + group  + '</td></tr>'

                    );



                    last = group;

                }

            });

        }



});



} );

Result: https://jsfiddle.net/cmedina/7kfmyw6x/13/