Dynamic column in jQuery DataTables

Question

In my application there are some columns that were given privileges. If the column is not given the right to access that particular column is not shown.

My code is like this : http://jsfiddle.net/oscar11/5jccbzdy/11/

// DataTable
    var table = $('#example').DataTable({
        "order": [[0, 'asc']],
        "drawCallback": function (settings){
            var api = this.api();

            // Zero-based index of the column containing names
            var col_name = 0;

            // If ordered by column containing names
            if (api.order()[0][0] === col_name) {
                var rows = api.rows({ page: 'current' }).nodes();
                var group_last = null;

                api.column(col_name, { page: 'current' }).data().each(function (name, index){
                    var group = name;
                    var data = api.row(rows[index]).data();

                    if (group_last !== group) {
                        $(rows[index]).before(
                            '<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>'
                        );

                        group_last = group;
                    }
                });
            }
        }
    });

How to make the above code becomes more dynamic and adjusting the number of columns that are given privileges?

If the number of columns that were given privileges: 5, then:

'<tr class="group" style="background-color:' + data[4] + '"><td colspan="5">' + group + '</td></tr>'

If the number of columns that were given privileges: 3, then:

  '<tr class="group" style="background-color:' + data[2] + '"><td colspan="3">' + group + '</td></tr>'

Thank you

Gyrocode.com · Accepted Answer · 2015-10-16 02:49:12Z

1

SOLUTION

You can use columns.name option to define a name for data column containing color.

Then in the row grouping code you can use column-selector color:name in api.column("color:name").index() to get index of that column.

Use the code below:

// DataTable
var table = $('#example').DataTable({
    "order": [[3, 'asc']],
    "columnDefs": [
        { targets: 3, name: "group" },
        { targets: -1, name: "color" }
     ],
    "drawCallback": function (settings){
        var api = this.api();

        // Zero-based index of the column containing group names
        var col_name = api.column("group:name").index();
        var col_color = api.column("color:name").index();

        // If ordered by column containing names
        if (api.order()[0][0] === col_name) {
            var rows = api.rows({ page: 'current' }).nodes();
            var group_last = null;

            api.column(col_name, { page: 'current' }).data().each(function (group, index){
                if (group_last !== group){                        
                    var color = api.cell({
                        row: api.row(rows[index]).index(),
                        column: col_color 
                    }).data();

                    $(rows[index]).before(
                        '<tr class="group" style="background-color:' + color + '"><td colspan="5">' + group + '</td></tr>'
                    );

                    group_last = group;
                }
            });
        }
    }
});

DEMO

See this jsFiddle for code and demonstration.

edited Oct 16, 2015 at 2:49

answered Oct 16, 2015 at 1:43

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

moses toh Over a year ago

Thank you for answering my question. I am still confused. I tried the code above. I change the column "Rendering Engine" to the third column. For example, the column "Engine" is not given the right of access (If not given the right to access that column will be lost). I tried the code like this:link. How can I make that grouped column fixed column "Rendering engine", although the other columns(column "Engine") are not given the right of access (be eliminated)?

Gyrocode.com Over a year ago

@mosestoh, added more details and updated the example. You can specify indexes of the column containing group and color in columnDefs section. Then code in drawCalback will use names group and color to retrieve those indexes instead of having them hardcoded.

moses toh Over a year ago

Thank you Gyrocode.com. But I still have difficulty to implement my problem. You try to see here : link. How can I make that grouped column fixed column "Rendering engine", although the other columns(column "Engine") are not given the right of access (be eliminated)? I mean like it.

Gyrocode.com Over a year ago

@mosestoh, see my updated answer regarding assigning names to columns, also see this jsfiddle.net/5qtoyunq/3

Collectives™ on Stack Overflow

Dynamic column in jQuery DataTables

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related