jquery datatables在其中一列中顯示圖像

我正在使用Jquery數據表並從使用Ajax的服務器獲取數據。基本上我發送的數據大約是Order，並且有不同類型的訂單。jquery datatables在其中一列中顯示圖像

我試圖實現的是發送Order type以及訂單數據，並在客戶端顯示圖像。

我有兩種主要類型，Surplus和Deficit。我有兩個圖像作爲我的客戶端和服務器端的靜態內容，我能夠獲取數據。我不知道如何顯示它。

這是我如何從服務器獲取

$('#matchOrderedTable').dataTable({ 
    "ajax": { 
     "url": TippNett.Api.Url + "Match/DataTable", 
     "data": function (d) { 
      d.token = authToken; 
     } 
    }, 
    "columns": [ 
     { "data": "Created" }, 
     { "data": "Amount" }, 
     { "data": "OrderOrg" }, 
     { "data": "OrderMatchedOrg" }, 
     { "data": "OrderLoc" }, 
     { "data": "OrderMatchLoc" }, 
    ] 
});

數據和我的視圖看起來像這樣

<table id="matchOrderedTable"> 
    <thead> 
     <tr> 
      <th>@Texts.Created</th> 
      <th>@Texts.Amount</th> 
      <th>@Texts.Organizations</th> 
      <th>@Texts.MatchedOrg</th> 
      <th>@Texts.Locations</th> 
      <th>@Texts.MatchedLoc</th> 
     </tr> 
    </thead> 
</table>

如何做到這一點任何想法或例子？

來源

2016-01-22 mohsinali1317

訂單類型獲取與您的網格數據返回？ –

是的，它確實發送與網格數據。 – mohsinali1317

您是否應該爲每一行返回訂單類型，以便您可以使用JavaScript來確定要在列中顯示的圖像？ –

嘗試使用columns.render屬性，以便您可以創建自定義函數以執行檢查訂單類型的邏輯，然後返回圖像的正確字符串表示形式。

實施例（更新以匹配下面的評論）

在您的表聲明代碼添加一列的順序類型

$('#matchOrderedTable').dataTable({ 
    "ajax": { 
     "url": TippNett.Api.Url + "Match/DataTable", 
     "data": function (d) { 
      d.token = authToken; 
     } 
    }, 
    "columns": [ 
     { "data": "Created" }, 
     { "data": "Amount" }, 
     { "data": "OrderOrg" }, 
     { "data": "OrderMatchedOrg" }, 
     { "data": "OrderLoc", render: getImg }, 
     { "data": "OrderMatchLoc", render: getImg } 
    ] 
});

柱渲染功能碼。 data屬性將行數據存儲爲對象，以便使用它訪問訂單類型值。

更新：即使OrderType沒有列，仍然可以訪問data參數中的對象值。

function getImg(data, type, full, meta) { 
     var orderType = data.OrderType; 
     if (orderType === 'Surplus') { 
      return '<img src="image path here" />'; 
     } else { 
      return '<img src="image path here" />'; 
     } 
    }

希望有幫助。

來源

2016-01-22 10:27:19

嘿，感謝您的解決方案。我試過了，它正在工作。唯一的問題是我不想爲訂單類型設置單獨的列。我想將它與OrderLoc和OrderMatchLoc連接起來。 – mohsinali1317

我會更新我的答案，刪除'OrderType'列，然後讓我知道它的正確性和適用於你 –

非常感謝。 – mohsinali1317

jquery datatables在其中一列中顯示圖像

回答

相關問題