How to reinitialize dataTables when the data source changes (pagination)

How to reinitialize dataTables when the data source changes (pagination)

flycat52flycat52 Posts: 2Questions: 1Answers: 0

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

  • flycat52flycat52 Posts: 2Questions: 1Answers: 0

    Sorry, the above Search.html doesn't show well. This is actually a table which id="tblSearchResults" with several columns including <thead> and <tbody>

This discussion has been closed.