How to custom row ID with multiple column value?

How to custom row ID with multiple column value?

hungdang996hungdang996 Posts: 3Questions: 2Answers: 0
edited August 3 in General

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();
                                }
                            }
                        });

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 54,716Questions: 1Answers: 8,560 Site admin
    edited August 3 Answer ✓

    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

  • hungdang996hungdang996 Posts: 3Questions: 2Answers: 0

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

Sign In or Register to comment.