How to custom row ID with multiple column value?

hungdang996

I'm having a case that i want to create datatable with the server side. I want to specify the unique string id for each row by username and email columns. How to make it work?

var dt_Table = $('#tb_list').DataTable({
     processing: true,
      serverSide: true,
      ajax: {
           url: "<URL FOR AJAX>",
           type: "POST"
     },
     columnDefs: [
           {
                className: 'control',
                orderable: false,
                responsivePriority: 1,
                targets: 0
            },{
                // For Checkboxes
                targets: 1,
                orderable: false,
                responsivePriority: 2,
                render: function (data, type, full, meta) {
                      return (
                              '<div class="custom-control custom-checkbox"> <input class="custom-control-input dt-checkboxes" type="checkbox" value="'+data+'" id="checkbox' +
                               data +
                                '" /><label class="custom-control-label" for="checkbox' +
                               data +
                                '"></label></div>'
                      );
            },
            checkboxes: {
                 selectAllRender:
                                            '<div class="custom-control custom-checkbox"> <input class="custom-control-input" type="checkbox" value="" id="checkboxSelectAll" /><label class="custom-control-label" for="checkboxSelectAll"></label></div>'
                                        }
                                    },{
                                        targets: 2,
                                        orderable: true,
                                        responsivePriority: 3,
                                    },{
                                        targets: 3,
                                        orderable: true,
                                        responsivePriority: 4,
                                    },{
                                        targets: 4,
                                        orderable: true,
                                        responsivePriority: 5,
                                    },{
                                        targets: 5,
                                        orderable: true,
                                        responsivePriority: 6,
                                    },{
                                        targets: 6,
                                        orderable: false,
                                        responsivePriority: 7
                                    }
                            ],
                            columns: [
                                { data: "responsive_id" },
                                { data: "username" },
                                { data: "fullname" },
                                { data: "phone" },
                                { data: "email" },
                                { data: "gender" }
                                { data: "col_act" }
                            ],
                            responsive: {
                                details: {
                                  type: 'column',
                                  renderer: function (api, rowIdx, columns) {
                                    var data = $.map(columns, function (col, i) {
                                      console.log(col);
                                      return col.title !== '' && col.hidden === true // ? Do not show row in modal popup if title is blank (for check box)
                                        ? '<tr data-dt-row="' +
                                            col.rowIndex +
                                            '" data-dt-column="' +
                                            col.columnIndex +
                                            '">' +
                                            '<td>' +
                                            col.title +
                                            ':' +
                                            '</td> ' +
                                            '<td>' +
                                            col.data +
                                            '</td>' +
                                            '</tr>'
                                        : '';
                                    }).join('');

                                    return data ? $('<table class="table"/>').append(data) : false;
                                  }
                                }
                            },
                            order: [[2, 'asc']],
                            dom:'<"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"d-md-block d-sm-none col-md-6 toogle-col"><"d-md-none d-sm-block col-sm-12"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                            displayLength: 10,
                            lengthMenu: [10, 25, 50, 75, 100],
                            "info": false,
                            language: {
                                paginate: {
                                    // remove previous & next text from pagination
                                    previous: '&nbsp;',
                                    next: '&nbsp;'
                                },
                            },
                            autoWidth: false,
                            fnDrawCallback: function(oSettings) {
                                if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
                                    $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
                                } else {
                                     $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
                                }
                            }
                        });

allan

We don't document it, but the rowId option (which is used to specify the data property you want to use for the row's DOM id) can actually be used as a function to do this kind of thing - example here: http://live.datatables.net/bobeluza/1/edit .

Allan

hungdang996

@allan i got a new approach from your answer, Thanks a lot