Receive value from data-value

Question

So i have datatable with action button, i want to get data-value on my click event. Here is how i set up my datatable

 $("#example1").DataTable({
         "bProcessing": true,
        "sAjaxSource": "<?=base_url();?>Module/getModule",
        "aoColumns": [
              { mData: 'module_name' } ,
              { mData: 'parent_name' } ,
              { mData: 'module_path' } ,
              { mData: 'module_icon' } , 
              {
              "mData": null,
              "bSortable": false,
              "mRender": function(data, type, full) {
                return '<a data-value='+ JSON.stringify(full) +' class="btn btn-info btn-sm showModal" href=#/' + full.module_id + '>' + 'Edit' + '</a>';
              }}
            ]    
        });

and here is my onclick

$(document).on("click",".showModal",function(){
     var val = $(this).data("value") ;
     console.log( val );
     var myModal = $("#exampleModal");
     myModal.modal("show");
});

for me it is weird, because some data showing the expected result and some don't.

Here is my data

{  
   "data":[  
      {  
         "module_id":"MD002",
         "module_name":"Course",
         "module_parent":"",
         "module_path":"#",
         "module_flag":"1",
         "module_type":"1",
         "module_icon":"icon\/course.png",
         "parent_name":null,
         "parent_id":null
      },
      {  
         "module_id":"MD001",
         "module_name":"Developer",
         "module_parent":"",
         "module_path":"#",
         "module_flag":"1",
         "module_type":"1",
         "module_icon":"icon\/web.png",
         "parent_name":null,
         "parent_id":null
      },
      {  
         "module_id":"MD005",
         "module_name":"Manage Module",
         "module_parent":"MD001",
         "module_path":"Module\/",
         "module_flag":"1",
         "module_type":"2",
         "module_icon":"fas fa-file-signature",
         "parent_name":"Developer",
         "parent_id":"MD001"
      },
      {  
         "module_id":"MD006",
         "module_name":"Manage User Access",
         "module_parent":"MD001",
         "module_path":"#",
         "module_flag":"1",
         "module_type":"2",
         "module_icon":"fas fa-universal-access",
         "parent_name":"Developer",
         "parent_id":"MD001"
      },
      {  
         "module_id":"MD003",
         "module_name":"Report",
         "module_parent":"",
         "module_path":"#",
         "module_flag":"1",
         "module_type":"1",
         "module_icon":"icon\/diagram.png",
         "parent_name":null,
         "parent_id":null
      },
      {  
         "module_id":"MD004",
         "module_name":"User",
         "module_parent":"MD001",
         "module_path":"#",
         "module_flag":"1",
         "module_type":"2",
         "module_icon":"fas fa-users-cog",
         "parent_name":"Developer",
         "parent_id":"MD001"
      }
   ]
}

So for example i click module_id : MD001 it showing this

but when i click moduleid : MD005 it showing this

So, what is my problem ? and how can i fix it ?

Answer 1

Instead of passing full JSON as an attr to HTML.

You can get row Data from Datatable on click.

Assign Datatable to a variable.

var datatable = $("#example1").DataTable({
     "bProcessing": true,
    "sAjaxSource": "<?=base_url();?>Module/getModule",
    "aoColumns": [
          { mData: 'module_name' } ,
          { mData: 'parent_name' } ,
          { mData: 'module_path' } ,
          { mData: 'module_icon' } , 
          {
          "mData": null,
          "bSortable": false,
          "mRender": function(data, type, full) {
            return '<a  class="btn btn-info btn-sm showModal" href=#/' + full.module_id + '>' + 'Edit' + '</a>';
          }}
        ]    
    });

Click event

 $('#example1 tbody').on('click', '.showModal', function() {
        var data = datatable.row($(this).parents('tr')).data();
        console.log(JSON.stringify(data));
    });