How to reinitialize dataTables when the data source changes (pagination)
How to reinitialize dataTables when the data source changes (pagination)
I'm using jQuery, knockout.js to develop a Singple Page Application site.
In the search page, I want to filter results by different search criteria (e.g. date range). When the page is first loaded, it will trigger search function by the default date range setting (e.g.12/01/14 - 12/04/14) and the pagination goes fine. However, when I change the search criteria to 11/01/14 - 11/30/14 for example, it requires to reinitialize this dataTable, and it always pops up error: Cannot reinitialise DataTable.
Here's part of my code:
search.html
Details | |||||||
---|---|---|---|---|---|---|---|
Details |
searchRepository.js
define(['plugins/router',
'repositories/search.model'], function (router, searchModel) {
var manager = new em.EntityManager('api');
return {
searchCheque: function (item) {
manager.postMethod(ko.mapping.toJSON(item),
function (data) {
router.isNavigating(false);
ko.mapping.fromJS(data, searchModel);
$('#tblSearchResults').dataTable({
bProcessing: true,
bPaginate: true,
bSort: false,
iDisplayLength: 5,
sPaginationType: 'bootstrap',
sDom: 't<\'row\'<\'span12\'i><\'span12\'p>>',
});
},
function (e) {
router.isNavigating(false);
toastr.error("Search Error: Please enter valid search criteria");
},
"search");
}
};
});
In the above js file, the data.items will return the search result object. The searchCheque function is triggered everytime when I click the search button in UI.
I'm new to this datatables.js, really appreciate your ideas about this.
Much thanks.
Answers
Sorry, the above Search.html doesn't show well. This is actually a table which id="tblSearchResults" with several columns including <thead> and <tbody>