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

这是我的onclick

$(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作为attr传递给HTML。

点击即可从数据表中获取行数据。

将数据表分配给变量。

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

从数据值中获取价值

1 个答案: