2017-01-13 2 views
1

Как я могу динамически получить значок в столбце 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' 
    }] 
}); 
} 
+0

@Rory Вы знаете, как добавить другой значок в каждой строке в том же столбце DataTable – ani

+0

макияжем массива с HTML, как вар arrmain = [ [ «E1», «RAM», «<я class = 'fa fa-music'> "," CHENNAI "," P1 "] ]; –

+0

Если я могу получить значение ячейки, то могу ли я использовать '' что-то вроде этого в функции рендеринга. Итак, пожалуйста, дайте идею об этом – ani

ответ

0

<!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(){ 
 

 
\t 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' 
 
    }] 
 
    }); 
 
\t 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<table id="datatable" class="display" cellspacing="0" width="100%"> 
 

 
</table> 
 

 
</body> 
 
</html>

0
$("#datatable").dataTable({ 

"данные": 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' 
    }]});} 
Смежные вопросы