Allan Jardine’s DataTables is a very powerful and slick jQuery plugin for displaying tabular data. It has many features and can do most of what you might want. One thing that’s curiously difficult though, is how to refresh the contents in a simple way, so I for my own reference, and possibly for the benefit of others as well, here’s a complete example of one way if doing this:
<table id="HelpdeskOverview">
<thead>
<tr>
<th>Ärende</th>
<th>Rapporterad</th>
<th>Syst/Utr/Appl</th>
<th>Prio</th>
<th>Rubrik</th>
<th>Status</th>
<th>Ägare</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
function InitOverviewDataTable() {
oOverviewTable = $('#HelpdeskOverview').dataTable(
{
bPaginate: true,
bJQueryUI: true, // ThemeRoller-stöd
bLengthChange: false,
bFilter: false,
bSort: false,
bInfo: true,
bAutoWidth: true,
bProcessing: true,
iDisplayLength: 10,
sAjaxSource: '/Helpdesk/ActiveCases/noacceptancetest',
fnRowCallback: formatRow
});
}
function RefreshTable(tableId, urlData) {
//oSettings.sAjaxSource?
$.getJSON(urlData,
null, function (json) {
table = $(tableId).dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
for (var i = 0; i < json.aaData.length; i++) {
table.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
});
}
function AutoReload() {
RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');
setTimeout(function () { AutoReload(); }, 30000);
}
$(document).ready(function () {
InitOverviewDataTable();
setTimeout(function () {
AutoReload();
},
30000);
});