dataTable serverside example
HTML
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<button class="btn btn-default" id="reload">reload table</button>
<button class="toggleCols" data-column="0">First Name</button>
<button class="toggleCols" data-column="0">Last Name</button>
<br>
<br>
<table id="example" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
JavaScript
function render_urlfn(data,type,row,meta){
var parameters = meta.settings.oInit.columnDefs[meta.col].parameters;
var target_url = parameters.url;
return '<a href="'+target_url+data+'">'+data+'</a>';
};
$(document).ready(function () {
var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
type: 'POST',
'url': url,
'data': function (d) {
//console.log(d.order);
return JSON.stringify( d );
}
},
"createdRow" : function(row,data,dataIndex) {
if (data[0] == "Airi") {
$(row).addClass('info');
}
},
"columnDefs": [ {
"targets" : 0,
"render": render_urlfn,
"parameters": {
"url": "http://some_new.url/"
//, "anotherparameter": true
//, "andanotherparamter": true
}
}
]
});
//
//
$('#reload').click(function (e) {
table.ajax.reload();
});
//
$('.toggleCols').click(function (e) {
e.preventDefault();
var column = table.column( $(this).attr('data-column') );
column.visible( ! column.visible() );
});
//
});