jquery數據表操作按鈕

任何人都可以幫助我添加操作按鈕的最佳方法，如編輯，刪除每行jQuery數據表中？jquery數據表操作按鈕

我已經通過一些鏈接，但沒有找到解決方案。

$(document).ready(function() { 

    $.ajax({ 
     url: '@Url.Action("GetStudentGridData", "UserManagement")', 
     type: "GET", 
     dataType: 'json', 
     success: function (data) { 
      $('#student-datatable').DataTable({ 
       data: data, 
       aoColumns: [ 
        { mData: "FirstName" }, 
        { mData: "Class" }, 
        { mData: "Roll" }, 
        { mData: "PresentAddress" }, 
        { mData: "BloodGroup" }, 
        { mData: "RegisterDate" }, 
        { 
         mRender: function (data, type, full) { 
          return '<a href="@Url.Action("Edit","Users")?id=' + data + '" class="editUser">Edit</a>'; 
         } 
        } 

       ] 

      }); 
     }, 
     error: function() { 
      alert("An error has occured!!!"); 
     } 
    }); 
});

這是我用來呈現數據表的js代碼。每行都有一個學生的詳細信息，在我的返回「數據」對象中，我擁有studentID屬性。當用戶單擊一行中的「編輯」按鈕時，我想使用該studentID獲取數據。

請幫助我如何渲染編輯和刪除按鈕，以及如何處理它們。

解決方案： 我試過了一種新方法。而不是使用DataTable屬性渲染列的我在HTML

<table id="student-datatable" class="table table-striped table-bordered table-hover table-highlight table-checkable" cellspacing="0"> 
<thead> 
    <tr> 

     <th>Name</th> 
     <th>Class</th> 
     <th>Roll</th> 
     <th>PresentAddress</th> 
     <th>Blood Group</th> 
     <th>Register Date</th> 
     <th>Action</th> 
    </tr> 
</thead> 

<tbody> 
    @{ 
     foreach (var cl in Model) 
     { 

      <tr> 
       <td>@cl.FirstName @cl.LastName</td> 
       <td>@cl.Class</td> 
       <td>@cl.Roll</td> 
       <td>@cl.PresentAddress</td> 
       <td>@cl.BloodGroup</td> 
       <td>@cl.RegisterDate</td> 
       <td> 
        <div > 
         <button type="button" class="btn btn-default edit-student-btn" data-student-id="@cl.StudentID"><i class="fa fa-edit"></i></button> 
         <button type="button" class="btn btn-default"><i class="fa fa-trash"></i></button> 
        </div> 
       </td> 
      </tr> 
     } 
    } 
</tbody>

添加按鈕，然後我打電話jQuery的數據表的方法。

$(document).ready(function() { 

    $('#student-datatable').DataTable(); 
});

這給了我很好的輸出：

來源

2017-05-23 Robin Halder

在這種情況下，你必須使用event delegation動態添加元素。

事件代表團允許我們附加一個單一的事件偵聽器，到父元素，將火了選擇匹配所有後代，無論是現在存在或在未來添加這些後代。

您應該使用.on（）方法綁定單擊事件處理程序。

$(document).on('click','.editUser',function(){ 
    var studentID=$(this).closest('tr').find('td').eq(6).html(); 
});

來源

2017-05-23 18:40:02

以及如何呈現這些按鈕？ –

你的意思是如何在頁面中顯示？ –

是的如何渲染編輯和刪除表中的每一行按鈕 –

jquery數據表操作按鈕

回答

相關問題