Nút chỉnh sửa động jQuery có thể chỉnh sửa được đính kèm với mỗi hàng

Question

hoàn toàn mới đối với jquery và có thể định giá được. Tôi muốn thêm nút chỉnh sửa gọi ra div hộp màu hiển thị tất cả trường có thể chỉnh sửa. bất cứ ai có thể chỉ cho tôi đi đúng hướng về cách này có thể đạt được?

Tôi có thể thêm một sClass vào từng trường và sử dụng gọi lại fnDrawCallback để gọi hộp màu từ trường. Nhưng đây là loại lộn xộn và tôi chỉ có một nút ở cuối mỗi hàng cho mục đích chỉnh sửa. cảm ơn rất nhiều cho bất kỳ con trỏ.

Answer 1

Tôi sẽ khuyên bạn nên sử dụng plugin tuyệt vời DataTables Editable. Plugin giúp dễ dàng chỉnh sửa các trường trực tiếp trong bảng.

Nếu bạn thực sự muốn có một nút trên mỗi hàng, bạn có thể thêm nó khi bạn tạo bảng serverside, hoặc thêm nó bằng cách sử dụng jQuery. Sau đó, bạn sẽ cần phải ràng buộc một hành động cho các nút.

Hãy nói rằng bạn muốn tiêm các nút, mã trở thành một cái gì đó như thế này:

$('#form-id').delegate('.edit-button', 'click', function() { 
    // action 
}).find('.classname-of-field-for-button').html('<button class="edit-button">'); 

Answer 2

Bạn có thể thêm thứ bởi fnCreatedCell gọi lại trong một định nghĩa cột trong aoColumnDefs sau bổ sung thêm một nút để hàng đầu tiên , với một xử lý sự kiện onclick đó chuyển hướng đến các giá trị trong cột đầu tiên (đây là somthing bạn có thể whant thay đổi.

"aoColumnDefs" : [ 
        { 
         "aTargets": [0], 
         "fnCreatedCell" : function(nTd, sData, oData, iRow, iCol){ 
          var b = $('<button style="margin: 0">edit</button>'); 
          b.button(); 
          b.on('click',function(){ 
           document.location.href = oData[0]; 
           return false; 
          }); 
          $(nTd).empty(); 
          $(nTd).prepend(b); 
         } 
        },