Dữ liệu về jQuery: Làm cách nào để thêm ID hàng vào mỗi hàng được thêm động?

Question

Tóm tắt

Tôi đang sử dụng plugin jQuery dataTables tuyệt vời từ http://www.datatables.net. Trong tập lệnh của tôi, tôi tự động thêm hàng dựa trên sự kiện kích hoạt bằng cách sử dụng fnAddData. Sử dụng fnRowCallback, tôi thêm vào một ID hàng duy nhất. Điều này đôi khi không thành công và không thêm ID hàng. Trong thử nghiệm có 46 hàng bổ sung, thường từ 6 đến 8 hàng không nhận được ID hàng.

chức năng Add Row

function ps_ins(row) 
{ 
    var rowArray = row.split('|'); 
    row = rowArray; 
    var alarmID = parseInt(row[1],10); 

    $('#mimicTable').dataTable().fnAddData([ 
    alarmID, 'col2', 'col3', 'col4', 
    'col5', 'col6', 'col7' 
    ]); 
} 

Hàng được bổ sung vào bảng một cách chính xác. Bài kiểm tra tôi đang chạy thêm 46 hàng và tất cả xuất hiện như mong đợi.

Thêm ID hàng

Tôi cố gắng để thêm một ID duy nhất cho mỗi hàng vì vậy tôi sau này có thể sửa đổi một hàng cụ thể và đề cập đến nó trong bộ nhớ cache DataTable bằng cách sử dụng một sự kết hợp của fnGetRows và .filter .

Tôi đang làm điều này bằng cách sử dụng fnRowCallback trong giai đoạn khởi tạo. Tôi đã giữ tất cả các cài đặt khác chỉ trong trường hợp có bất kỳ điều gì có thể ảnh hưởng đến sự cố.

$('#mimicTable').dataTable({ 
    "sDom": 'lip<"mimicSpacer">f<"numUnAck">rt', 
    "sScrollY": "365px", 
    "aaSorting": [[4,'desc'],[5,'desc']], 
    "iDisplayLength": 15, 
    "aLengthMenu": [[15, 50, 100, -1], [15, 50, 100, 'All']], 
    "bAutoWidth": false, 
    "aoColumns": [ 
     null, 
     { "sWidth": "20%" }, 
     { "sWidth": "22%" }, 
     { "sWidth": "9%" }, 
     { "sWidth": "9%" }, 
     { "sWidth": "20%" }, 
     { "sWidth": "20%" } 
    ], 
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     $(nRow).attr("id",'alarmNum' + aData[0]); 
     return nRow; 
    } 
    }); 

Một console.log của đối tượng DataTable cho thấy:

Như bạn thấy, # 14 có id hàng và cũng là lớp rowStripe đúng. # 15 (và trở đi) thì không.

Vì vậy, tại sao fnRowCallback không kích hoạt mỗi khi một hàng được thêm vào, chỉ đôi khi? Có thể có cách nào tốt hơn để thêm ID hàng khi hàng được thêm vào?

Answer 1

Tìm thấy giải pháp: http://www.datatables.net/forums/discussion/2119/adding-row-attributes-after-fnadddata/p1

Đối với bất cứ ai khác muốn một giải pháp nhanh chóng, tôi đã làm:

var addId = $('#mimicTable').dataTable().fnAddData([ 
    alarmID, 
    'col2', 
    'col3', 
    'col4', 
    'col5' 
]); 

var theNode = $('#mimicTable').dataTable().fnSettings().aoData[addId[0]].nTr; 
theNode.setAttribute('id','alarmNum' + alarmID); 

Answer 2

Có gì đó bất ngờ với mã của bạn trong jsbin, ngay cả khi nó dường như là đang làm việc. Nó khởi tạo với bộ dữ liệu "trình duyệt". Sau đó, nó xóa. Sau đó, nó làm cho một bảng mới với một hàng. Sau đó, nó xóa. Sau đó, nó làm cho một bảng mới với hai hàng. Sau đó, nó xóa. Sau đó, nó làm cho một bảng mới với ba hàng.

Tôi phải hiểu rõ hơn về mẫu mã và mục tiêu cuối cùng của nó (và sự chú ý của tôi được chuyển hướng ở nơi khác ngay bây giờ) nhưng bạn nên biết rằng fnRowCallback NÊN là cách để làm điều này, và ở đó là nhiều công trình xây dựng bảng dự phòng và bổ sung hàng sẽ tác động đến hiệu suất cũng như tính linh hoạt với việc sửa đổi hiển thị trong tương lai.

Answer 3

Tôi biết đây là một chủ đề cũ nhưng điều này có thể giúp người khác. Cách đơn giản nhất tôi làm điều đó để thêm thuộc tính id vào hàng bổ sung mới nhất ngay sau khi tôi gọi là chức năng bảng dữ liệu fnAddData là:

$('#table').dataTable().fnAddData(['col1','col2','col3']);  

$('#table tr:last').attr('id','col'+row_id); 

Answer 4

Hãy thử điều này nó làm việc cho tôi độc đáo:

var newRow = oTable.fnAddData([ etc..]); 
var oSettings = oTable.fnSettings(); 
var nTr = oSettings.aoData[ newRow[0] ].nTr; 
nTr.id = 'new id'; 

Answer 5

bạn có thể sử dụng DT_RowId khi bạn thêm hàng mới, và sử dụng đối tượng thay vì một mảng, xem dưới đây:

$('#mimicTable').dataTable().fnAddData({ 
      'DT_RowId': alarmID, 0:'col2', 1:'col3', 2:'col4', 
      3:'col5', 4:'col6', 5:'col7' 
     }); 

Answer 6

này làm việc cho tôi

var MyUniqueID = "tr123"; // this is the uniqueId. 
var rowIndex = $('#MyDataTable').dataTable().fnAddData([ "column1Data", "column2Data"]); 
var row = $('#MyDataTable').dataTable().fnGetNodes(rowIndex); 
$(row).attr('id', MyUniqueID);