2016-11-28 82 views
0

我有一個數據表,我一次加載所有數據,但是我的數據集將會變得非常大,因此我決定將所有服務器端移動到一邊。DataTables從服務器端JSON的可點擊的行鏈接

以前我可以通過使用「數據鏈接」嵌入鏈接到每一行的屬性,然後偵聽此功能,請點擊:

$('#table tbody').on('click', 'tr', function() { 
     var url = this.getAttribute("data-url") 
     window.open(url, "_self"); 
    }); 

它的工作完全一樣,但我沒有能夠弄清楚如何使用AJAX和JSON進行這項工作。

我的JSON響應如下所示:

{"recordsFiltered": 1, "recordsTotal": 6, 
"data": [{"4": "", "6": "", "7": "Online", "3": "", "DT_RowClass": "success", 
"5": "", "data-url": "/relative-url/pk/", "2": "TestType2", 
"0": "Test", "1": "ABCD"}], "draw": "11"} 

但是我不知道我是如何得到數據表的數據url屬性添加到該行。我一直在瀏覽文檔,試圖找到這個用例的例子,但到目前爲止還沒有任何運氣。

如果沒有內置的功能,我想我需要重寫DataTables用來加載JSON數據的功能,但我不知道該怎麼做。

我用我的服務器端語言比JavaScript好得多,所以我真的很感激更具體的答案,如果可能的話。

謝謝

回答

2

正如@cjungel上面提到的那樣,這是一種方法。雖然Mor最近版本的DataTable使用rowCallback。因此,例如,您可以使用這種類型的東西:

"rowCallback": function(row, data, index){ 
    $(row).attr("data-url", data[1]); 
} 

按照此JSFiddle。希望有所幫助。

+0

謝謝,那正是我需要的。我不得不將我的JSON響應「data-url」更改爲「8」,因爲它不在該函數的數據列表中。之後,我可以使用索引調整後的示例完美地檢索它。 – Del

+1

根據文檔['createdRow'](https://datatables.net/reference/option/createdRow)對此更有效。 –

+0

謝謝,@ Gyrocode.com我應該更徹底地閱讀文檔。 – annoyingmouse

1

可以使用fnCreatedRow回調。

按照documentation

如果使用DOM源當TR元素創建(和所有TD子 元件已被插入)此函數被調用,或註冊, 允許的操作TR元素(添加類等)。

+0

感謝您的回答。因爲我發現它更容易,所以我最終與惱人的小鼠的答案一起去了,但我也很欣賞你所建議的方法。 – Del