$('#example').dataTable({
"data": [
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A'],
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
['Trident','Internet Explorer 6','Win 98+','6','A']
],
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
],
"initComplete": function(settings, json) {
$('#new-list').insertBefore('#example');
$('#new-list').show();
},
"rowCallback": function( row, data ) {
var li = $(document.createElement('li'));
for(var i=0;i<data.length;i++) {
li.append('<p>' + data[i] + '</p>');
}
li.appendTo('#new-list');
},
"preDrawCallback": function( settings ) {
$('#new-list').empty();
}
});
ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul li {
display: inline-block;
width: 100px;
border: 1px #CCC solid;
padding: 10px;
margin: 3px;
}
ul li p {
margin-top: 2px;
margin-bottom: 2px;
}
.dataTables_length {
width: 50%;
}
.dataTables_filter {
width: 50%;
}
<link href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="display: none;" cellspacing="0" width="100%"></table>
<ul id="new-list" style="display: none;" />