Question

如何动态地将图标添加到dataTable列中。在每一行中，dataTable中的同一列中都需要不同的图标。例如fa-music，fa-language和fa-magic。所有这些都来自数组作为dataTable中的单词。如何在不同的行中获得不同的图标？

var arrmain = [
  ["E1", "RAM", "fa-umbrella", "CHENNAI", "P1"],
  ["E2", "RAJU", "fa-cloud", "PUNE", "P1"],
  ["E3", "JOHN", "fa-language", "KOLKATA", "P2"],
  ["E4", "JAY", "fa-language", "CHENNAI", "P2"],
  ["E5", "NEHA", "fa-magic", "MUMBAI", "P3"],
  ["E6", "NAYYAR", "fa-music", "DELHI", "P3"]
];

$("#datatable").dataTable({
  "data": arr1,
  "iDisplayLength": 10,
  "dom": 'frtp',
  "pagingType": "simple_numbers",
  "bDestroy": true,
  columns: [{
    title: 'E_ID'
  }, {
    title: 'E_NAME'
  }, {
    title: 'E_ICON',
    render: function(title, type, row) {
      var a = '<i class="fa fa-money "></i>';
      return a;
    }
  }, {
    title: 'E_CITY'
  }, {
    title: 'P_ID'
  }]
});
}

Answer 1

<!DOCTYPE html>
<html>
<head>



<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet">



<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>


<script>
$(document).ready(function(){

	var arrmain = [
  ["E1", "RAM", "<i class='fa fa-umbrella'></i>", "CHENNAI", "P1"],
  ["E2", "RAJU", "<i class='fa fa-cloud'></i>", "PUNE", "P1"],
  ["E3", "JOHN", "<i class='fa fa-language'></i>", "KOLKATA", "P2"],
  ["E4", "JAY", "<i class='fa fa-language'></i>", "CHENNAI", "P2"],
  ["E5", "NEHA", "<i class='fa fa-magic'></i>", "MUMBAI", "P3"],
  ["E6", "NAYYAR", "<i class='fa fa-music'></i>", "DELHI", "P3"]
];


    $("#datatable").dataTable({
    "data": arrmain,
    "iDisplayLength": 10,
    "dom": 'frtp',
    "pagingType": "simple_numbers",
    "bDestroy": true,
    columns: [{
      title: 'E_ID'
    }, {
      title: 'E_NAME'
    }, {
      title: 'E_ICON'
     
    }, {
      title: 'E_CITY'
    }, {
      title: 'P_ID'
    }]
  });
	
});
</script>
</head>
<body>

<table id="datatable" class="display" cellspacing="0" width="100%">

</table>

</body>
</html>

Answer 2

$("#datatable").dataTable({

“data”：arr1，它应该是“arrmain”。

$("#datatable").dataTable({
  "data": arr1,
 "iDisplayLength": 10,
  "dom": 'frtp',
  "pagingType": "simple_numbers",
"bDestroy": true,
columns: [{
title: 'E_ID'
  }, {
title: 'E_NAME'
 }, {
title: 'E_ICON',
render: function(title, type, row) {
   var a = '<i class= '+ row[2] +'></i>';
  return a;
}
 }, {
title: 'E_CITY'
  }, {
title: 'P_ID'
  }]});}

如何为数组中相同的数据列中的每一行提供不同的图标

2 个答案: