JQuery DataTable добавить атрибут для настройки кнопки

Question

Я пытаюсь создать JQuery DataTable с помощью кнопок настройки. Это мой код:

<table id="myDataTable" class="display" width="100%"> 
      <thead> 
       <tr>  
        <th> </th>     
        <th>Company name</th> 
        <th>Address</th> 
        <th>Town</th>        
        <th></th>           
       </tr> 
      </thead> 
      <tbody>     
      </tbody> 
     </table> 
    </div> 
</div> 

<script> 
    $(document).ready(function() { 

     $('#myDataTable').dataTable({ 
      "bServerSide": true, 
      "sAjaxSource": "Home/GetDataTable", 
      "bProcessing": true, 
      "aoColumns": [ 
      {"data": "ID"}, 
      { "data": "Name" }, 
      { "data": "Address" }, 
      { "mData": "Town" },   
      { 
       bSortable: false, 
       data: null, 
       className: "center", 
       defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>' 
      } 
      ], 
      "columnDefs": [ 
      { 
       "targets": [ 0 ], 
       "visible": false, 
       "searchable": false 
      },   
      ]  
     }); 
    }); 
</script> 

И это в моем ActionController:

return Json(new 
      { 
       sEcho = param.sEcho, 
       iTotalRecords = result.Count(), 
       iTotalDisplayRecords = result.Count(), 
       aaData = result 
      }, 
     JsonRequestBehavior.AllowGet); 
     } 

Этот код работает отлично, но теперь я хочу, чтобы добавить data-id атрибуты к моему кнопок. Я хочу установить значение ID field (которое я скрыл) до атрибута data-id для каждой строки. Как я могу это реализовать?

Answer 1

<script> 
    $(document).ready(function() { 

     $('#myDataTable').dataTable({ 
      "bServerSide": true, 
      "sAjaxSource": "Home/GetDataTable", 
      "bProcessing": true, 
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
       // if your button is in 5th column then index will be 4 because it starts from 1 
       $('td:eq(4)', nRow).find('button').attr('id',aData[0]); 
       //assuming your id is in the 1st element of data 

      }, 
      "aoColumns": [ 
      {"data": "ID"}, 
      { "data": "Name" }, 
      { "data": "Address" }, 
      { "mData": "Town" },   
      { 
       bSortable: false, 
       data: null, 
       className: "center", 
       defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>' 
      } 
      ], 
      "columnDefs": [ 
      { 
       "targets": [ 0 ], 
       "visible": false, 
       "searchable": false 
      },   
      ]  
     }); 
    }); 
</script> 

Answer 2

привет может у пожалуйста проверить этот код:

  { 
       bSortable: false, 
       data: null, 
       render: function(d) { 
        return "<button class="btn btn-danger data-id="'+ d.YourModelID +'" ">edit</button> <button class="btn btn-primary">delete</button>"; 
       }, 
       className: "center", 
      } 

вместо этого:

  { 
      bSortable: false, 
      data: null, 
      className: "center", 
      defaultContent: '<button class="btn btn-danger data-id="" ">edit</button> <button class="btn btn-primary">delete</button>' 
     }