Получить значение из data-value

Question

Итак, у меня есть дата с кнопкой действия, я хочу получить data-value на моем событии клика. Вот как я могу установить свои данные

 $("#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>';
              }}
            ]    
        });

и вот мой клик

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

для меня это странно, потому что некоторые данные показывают ожидаемый результат, а некоторые нет.

Вот мои данные

{  
   "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"
      }
   ]
}

Так, например, я нажимаю module_id : MD001, показывая это

но когда я нажимаю moduleid : MD005, это показывает

Итак, в чем моя проблема? и как я могу это исправить?

Answer 1

Вместо передачи полного JSON в качестве атрибута HTML.

Вы можете получить строку данных из Datatable по клику.

Назначение Datatable переменной.

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>';
          }}
        ]    
    });

Событие клика

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