DataTables Sandbox

HTML

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

<table class = "display" id = "datatable"></table>

CSS

.text_center{ 
	text-align : center;
}

.cell_table {
	max-width : 250px;
}

JavaScript

var column_name = [{
			title : "Bassin"
		}, {
			title : "yield"
		}, {
			title : "surf"
		}, {
			title : "prod"
	}];

var data_use = [ ["Le Gold", 77.5, 10190, 789666], ["Bois Rouge", 68.9, 10031, 691571], ["Total île", 73.2, 20221, 1481237]];

$('#datatable').DataTable({
			"sPaginationType" : "full_numbers",
			"columnDefs" : [{
				"targets": "_all",
				"createdCell" : function (td, cellData, rowData, row, col) {
					$(td).attr('id', 'cell-' + col);
				},
			}, {
				"targets" : [0, 1, 2, 3],
				"className" : "text_center",
			}, {
				"targets" : [0, 1, 2, 3],
				"className" : "cell_table",
			}],
			"lengthMenu" : [[5, 10, 25, -1], [5, 10, 25, "All"]],
			"iDisplayLength" : 25,
			data : data_use,
			columns : column_name,
			dom : 'lfrtip',
			responsive : true,
			destroy : true,
			searching: true,
});